Question

我目前正在为虚拟航空公司设置网站，我需要帮助才能获得两个图像显示在同一行而不是一个打破下一行。

应显示为：

LOGO ICON

但转而变成：

               ICON

LOGO

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

谢谢！

Answer 1

检查this 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搞砸了 - 内联样式声明，错误的图像链接等。

使用layout.tpl文件中的以下内容替换#top 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;
}

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

3 个答案: