Question

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

我该怎么做？这是我尝试过的jsFiddle：http://jsfiddle.net/unix_user/VSd6Y/6/。

Answer 1

使用display:inline-block。这样，您的div将彼此叠加和，您可以指定block元素共有的宽度和其他属性。

查看updated fiddle。您可以看到div样式与container分开排列，但子div彼此相邻。

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>

如何在结构中排列HTML div？

3 个答案: