javascript - 如何将 HTML div 对齐在一行中？

Question

我正在尝试在水平行结构中对齐一些 div。有一个 divcontainer有子 div，这些子 div 应该在同一行。可以有许多这样的容器 div，它们具有不同的 id 但类名相同。

我怎样才能做到这一点？这是我尝试的 jsFiddle：http: //jsfiddle.net/unix_user/VSd6Y/6/。

Answer 1

使用display:inline-block. 这样，您div将彼此相邻堆叠，并且您可以指定block元素的宽度和其他属性。

查看更新的小提琴。您可以看到div带有样式的 scontainer位于不同的行上，但子divs 彼此相邻堆叠。

Answer 2

把它想象成一个UL LI结构。您可以使用float:left;元素或display:inline-block;新浏览器。

Answer 3

我建议使用 .class 做一些事情，例如：

.repeating{width:400px; height:100px;margin:0px;padding:0px;}    
.repeatMe{width:90px; height:100px; padding:0px 5px; float:left;}



<div id="repeating">
<div class="repeatMe"><img src="imghere.gif" /></div>
<div class="repeatMe"><img src="imghere.gif" /></div>
<div class="repeatMe"><img src="imghere.gif" /></div>
<div class="repeatMe"><img src="imghere.gif" /></div>
</div>