Html 如何在同一行上显示两个图像（CSS）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16494562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display two images on the same line (CSS)
提问by Reid Chase
I'm currently skinning site for a virtual airline and I need help as to how to get two images to show up on the same line instead of one breaking onto the next line.
我目前正在为一家虚拟航空公司制作网站外观，我需要有关如何让两个图像显示在同一行上而不是一个中断到下一行的帮助。
It should be displayed as:
它应该显示为：
LOGO ICON
标志图标
But instead it turns into:
但它变成了：
ICONLOGO
ICON标识
Does anyone know how to fix this in the CSS?
有谁知道如何在 CSS 中解决这个问题？
Thanks!
谢谢！
采纳答案by Qantas 94 Heavy
First, I have to admit your HTML is screwed up - inline style declarations, incorrect image links, etc.
首先，我必须承认你的 HTML 被搞砸了——内联样式声明、不正确的图像链接等。
Replace the #topdiv with the following in your layout.tpl file:
将#topdiv替换为layout.tpl 文件中的以下内容：
<!-- Logo + Search + Navigation -->
<div id="top">
<a id="logo" href="<?php echo SITE_URL?>" target="_blank">
<img src="/lib/skins/klm/img/logo.png" alt="Home">
</a>
<img id="fb" src="http://fc04.deviantart.net/fs71/f/2012/295/0/a/facebook_icon_by_x_1337_x-d5ikwkm.png" alt="Facebook">
</div>
Replace the following CSS style declarations with this:
将以下 CSS 样式声明替换为：
#fb {
float: left;
position: absolute;
display: inline;
width: 50px;
bottom: 0;
right: 0;
}
#logo {
bottom: 0;
display: inline;
left: 0;
position: absolute;
}
#top {
height: 58px;
margin: 0;
padding: 10px 0;
position: relative;
}
回答by Sergio
Check this jsfiddle
You can make a div for each LOGO and ICON and float them.
您可以为每个 LOGO 和 ICON 制作一个 div 并将它们浮动。
<div class="head">
<div class="logo">LOGO</div>
<div class="logo">ICON</div>
</div>
and CSS:
和 CSS：
.head { width:100%;}
.logo {float:left; padding:10px;}
回答by Sam Oyl
try using links instead of using image tags ,,
尝试使用链接而不是图像标签，
HTML:
HTML：
<div class="container">
<a class="one"><a class="two"></a></a>
</div>
CSS:
CSS：
.one {float:left; background-image: url(../img/logo.png);}
.two {float:right; background-image: url(../img/ico.png);}
or if you still want to use the image tag, you can also use this ..
或者如果你仍然想使用图像标签，你也可以使用这个..
HTML:
HTML：
<div class="container">
<img class="one" alt scr="bla">
<img class="two" alt scr="bla">
</div>
CSS:
CSS：
.container {display:table;}
.one, .two {display:table-column;} -or- .one, .two {display:table-cell;}
if you're going to change the container's size, sure it must fit both of the images.
如果您要更改容器的大小，请确保它必须适合两个图像。
