html - 如何在同一行显示两个图像（CSS）

Question

我目前正在为一家虚拟航空公司设计网站，我需要有关如何让两个图像显示在同一行而不是一个中断到下一行的帮助。

它应该显示为：

标志图标

但相反，它变成了：

               ICON

标识

有谁知道如何在 CSS 中解决这个问题？

谢谢！

Answer 1

检查这个jsfiddle

您可以为每个 LOGO 和 ICON 制作一个 div 并将它们浮动。

<div class="head">
   <div class="logo">LOGO</div>
   <div class="logo">ICON</div>
</div>

和 CSS：

.head { width:100%;}
.logo {float:left; padding:10px;}

Answer 2

尝试使用链接而不是使用图像标签，，

HTML：

<div class="container">
    <a class="one"><a class="two"></a></a>
</div>

CSS：

.one {float:left; background-image: url(../img/logo.png);}
.two {float:right; background-image: url(../img/ico.png);}

或者如果你仍然想使用图像标签，你也可以使用这个..

HTML：

<div class="container">
    <img class="one" alt scr="bla">
    <img class="two" alt scr="bla">
</div>

CSS：

.container {display:table;}
.one, .two {display:table-column;} -or- .one, .two {display:table-cell;}

如果您要更改容器的大小，请确保它必须适合两个图像。

Answer 3

首先，我不得不承认你的 HTML 搞砸了——内联样式声明、不正确的图像链接等。

#top在 layout.tpl 文件中将 div 替换为以下内容：

<!-- 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>

将以下 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;
}