Question

如何让这些图像水平对齐而不是垂直对齐？

CSS

.images {

    top: -20px;
    width: 1400px;
    float: left;
}

Answer 1

.images div {
    display: inline-block;
}

问题是你的图像位于横跨容器整个宽度的div内。将它们设置为显示为inline-blocks，它们将排列在一起，而不需要float。

Answer 2

.images div > img {
    float:left;
}

jsFiddle here

或..

.images > div {
    display: inline-block;
}

jsFiddle here

Answer 3

@JoshC是对的。您想要使用浮点数或内联块。但是，有一个未解决的问题，为什么在原始问题中将容器的宽度设置为1400px。

我猜你想要的是将所有图像放在一条水平线上，而不是将它们包裹起来，这就是每个人都做过的例子。你在问题中说的很多，但如果你想要一行图像，或者只是水平填充空间，然后垂直填充空间，那么它不是完全清楚。

如果你使用inline-block方法并将容器设置为不换行，你将得到一个水平滚动

.images{
    white-space:nowrap;
}
.images > div {
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;
}

http://jsfiddle.net/gksSy/13/ - 我添加了一些JS来生成大量图像，以便您可以看到效果是什么。为了完整起见，我还添加了跨浏览器的东西（虽然我怀疑-moz可能是必要的）

内联块的缺点是元素之间的空格出现在结果中。你可以通过删除元素之间的所有空格来解决这个问题。

Answer 4

.images div {
    display: inline;
}

或

.images div {
    float: left;
}

视您的需要而定。

Answer 5

.images div {
    float: left;
}

Answer 6

将someclass添加到包含图片的div

<div class="images">
<div class="imgs" data-ot="Test 1" data-ot-background="#ffffff" data-ot-shadow-Color="rgba(0,0,0,0.1)" data-ot-border-Width="false"><img src="http://www.yamaha.com/yamahavgn/images/icon_Phone30x30.png" alt="" /></div>
<div class="imgs" data-ot="Test 2" data-ot-background="#ffffff" data-ot-shadow-Color="rgba(0,0,0,0.1)" data-ot-border-Width="false"><img src="http://www.yamaha.com/yamahavgn/images/icon_Phone30x30.png" alt="" /></div>
<div class="imgs" data-ot="Test 3" data-ot-background="#ffffff" data-ot-shadow-Color="rgba(0,0,0,0.1)" data-ot-border-Width="false"><img src="http://www.yamaha.com/yamahavgn/images/icon_Phone30x30.png" alt="" /></div>
</div>

然后添加一些css

.imgs{display:inline}

使用CSS对齐图像

6 个答案: