Question

我有以下的HTML ..

<div class="container animate" data-animation="pulse">
    <div class="margin30 "></div>
    <h2 class="border-title">Powering payments for <span></span></h2>
    <div class="margin25"></div>
    <div style="display:table-cell;">
        <div>
            <img src="images/clientlogos/pappa.png" title="" width="170" height="88" style="margin-left:5px;">
        </div>
        <div>
            <img src="images/clientlogos/offergrid.png" title="" width="215" height="55" style="margin-left:5px;">
        </div>
        <div>
            <img src="images/clientlogos/index.png" title="" width="121" height="33" style="margin-left:5px;">
        </div>
        <div>  
            <img src="images/clientlogos/fudr.png" title="" width="156" height="65" style="margin-left:5px;">
        </div>
        <div>
            <img src="images/clientlogos/inloc8.png" title="" width="139" height="39" style="margin-left:5px;">
        </div>
    </div>
</div>

有人能告诉我怎么能安排所有在水平线上有图像的div。我想要一行中的所有图像

Answer 1

div, img {
    float: left;
    display: inline-block;
}

Answer 2

你的div上的

float: left是一个选项：

http://jsfiddle.net/c3DV3/

Answer 3

由于您只在div中存储图像，因此您应该检查是否更好地使用<img>标记或将其设置为background-image，如display:inline-block;中所述。 {3}}。它主要取决于你将如何处理这些图像。检查链接以获取更多信息。

像其他已经说过的那样，将div放在左边是正确的方法。您也可以使用vertical-align:top;（即使div默认呈现为块）。

就我个人而言，如果您只想在一行上显示它们，或者将它们对齐在顶部，我个人无法获得：在这种情况下，您可以使用{{1}}以及其他CSS参数来实现结果。

如何安排在水平线上有图像的div

3 个答案: