1

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

jsfiddle

CSS

.images {

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

6 回答 6

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

问题是您的图像位于容器的整个宽度上的 div 内。将它们设置为显示为inline-blocks，它们将在不需要的情况下排列float。

于 2013-09-27T23:06:06.953 回答
2 
.images div > img {
    float:left;
}

jsFiddle在这里

或者..

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

jsFiddle在这里

于 2013-09-27T23:06:52.200 回答
1

@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 可能是必要的）

inline-block 的缺点是元素之间的空格出现在结果中。您可以通过删除元素之间的所有空格来解决此问题。

于 2013-09-27T23:53:06.633 回答
0 
.images div {
    display: inline;
}

或者

.images div {
    float: left;
}

取决于你的需要。

于 2013-09-27T23:06:11.217 回答
0 
.images div {
    float: left;
}
于 2013-09-27T23:06:30.133 回答
0

添加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}
于 2013-09-27T23:08:06.247 回答