Question

我有代码生成子div基于集合中的N个节点，可能是一个或多个节点，因此生成的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;
}

FIDDLE

内联块

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

FIDDLE

请注意

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

内联阻止 - http://jsfiddle.net/GqjtC/8/

float - http://jsfiddle.net/GqjtC/9/

Answer 2

尝试：

.child_div {
    float: left
}

我在想的几点：

我不会只是将child_div浮动，而是考虑制作更多的上下文选择器，例如：
```
.parent_div > div {
    float: left;
}
```
这基本上表示div的直接子女的.parent_div将被浮动。
浮动有缺点：如果所有子项都浮动，则父容器不会保留子容器的高度。因此，如果.parent_div应该是围绕孩子的边框，则可能需要额外的CSS或标记。
display: inline-block有一些缺点：您可能遇到跨浏览器兼容性问题。

如果存在动态列数，则设置宽度可能会变得棘手。不确定这是否适用于您，但我建议您查看网格系统，例如960.gs。祝你好运！

Answer 3

如果你想在一行中所有，你必须知道每一个的宽度。如果你只是希望它们像正常文本一样循环，那么有几种不同的解决方案。

选项1

您可以将它们视为ul中的列表项，并将其用于您的css：

.parent_div .child_div {
  ...
  display: inline;
}

选项2

您可以将每个div浮动到左侧或右侧，具体取决于您希望它们来自哪一侧：

.parent_div .child_div .from_right {
  ...
  float: right;
}

.parent_div .child_div .from_left {
  ...
  float: left;
}

选项3

就像我上面说的那样，你需要知道每个div的宽度才能使它们全部出现在屏幕上的一行中。如果您不知道会有多少元素，您可以考虑使用table（喘气！）来保留它们而不是使用divs，如下所示：< / p>

<table class="data">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

确保所有内容都在同一个tr。否则，线将包裹。这样做的好处是你可以循环你的创建脚本，使一个灵活数量的元素连续出现，甚至不必触及你的CSS。

Answer 4

添加到child-div：

.child_div{
   ...
   float: left;
   ...
 }

Answer 5

Razvan和Tuanderful说了什么，但您还需要在某处设置宽度 - 无论是.parent_div，还是.parent_div和.child_div。

祝你好运！

如何并排获得div

5 个答案:

选项1

选项2

选项3