如何并排获得div

Question

我有代码根据集合中的 N 个节点生成子 div，可能是一个或多个节点，所以生成的 html 如下所示：

<div class='parent_div'>
<div class ='child_div'></div>
<div class ='child_div'></div>
</div>

<div class='parent_div'>
<div class ='child_div'></div>
<div class ='child_div'></div>
<div class ='child_div'></div>
</div>

让所有子节点并排排列的 CSS 会是什么样子？

这是 jsFiddler 中的一个更强大的示例，它更接近实际情况。我无法让它在 Firefox 或 IE 中工作：

http://jsfiddle.net/scarleton/GqjtC/10/

我在这里寻求帮助的一部分是如何最好地使列间隔正确。我应该使用百分比还是实际像素？我不知道，我对其中任何一个都持开放态度，只是需要一些建议。

Answer 1

您可以使用float:left或display:inline-block

漂浮

.child_div{
   float: left;
}
.parent_div{
    clear:both;
}

小提琴

内联块

.child_div{
   display: inline-block;
   vertical-align: top;
}

小提琴

笔记

• 空格会占用空间（块级元素的开头或结尾除外），使用 float 来克服这个问题，或者删除空格
• 浮动元素的尺寸不会影响父元素，除非有兄弟元素清除浮动
• 边框和填充化妆额外的宽度使用box-sizing : border-box 来克服这个问题

内联块 - http://jsfiddle.net/GqjtC/8/

浮动 - http://jsfiddle.net/GqjtC/9/