如何让div并排显示

Question

如何让div并排显示

3

我有一段代码，根据集合中的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/

我需要帮助的部分是如何最好地调整列的间距。应该使用百分比还是像素？我不确定，两者都可以，只需要一些建议。

- Sam Carleton

2

你能否将float:left的CSS样式应用于所有child_div吗？ - zdebruine

5个回答

3

尝试：

.child_div {
    float: left
}

我想到了几个要点:

Instead of just floating the child_div left, I would consider making a more contextual selector such as:
```
.parent_div > div {
    float: left;
}
```
This basically says that the divs that are immediate children of .parent_div will be floated.
Floating has drawbacks: the parent container does not preserve the height of the children if all children are floated. So if .parent_div is supposed to be a bordered box surrounding the children, you may need additional CSS or markup.
display: inline-block has drawbacks: you may run into cross-browser compatibility issues.

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

- Tuanderful

啊，谢谢Jon。我会从你的省略号中借用一个“.” :) - Tuanderful

2

如果你希望它们全部在一行上，你需要知道每一个元素的宽度。如果你只是想让它们像文本一样无限循环滚动，有几种不同的解决方案。

选项1

你可以将它们视为 ul 中的列表项，并使用以下 CSS：

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

选项二

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

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

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

选项3

如我之前所说，您需要知道每个div的宽度才能使它们全部在屏幕上单行显示。如果您不知道将有多少元素，可以考虑使用table（哇！）来代替使用divs，如下所示：

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

请确保所有内容都在同一个tr中。否则，行将会换行。这样做的好处是可以循环创建脚本，使一定数量的元素以灵活的方式出现在一行中，而无需触摸CSS。

- Jon Egeland

1

Razvan和Tuanderful所说的是对的，但你还需要在其中设置宽度 - 无论是只针对.parent_div，还是同时针对.parent_div和.child_div。

祝你好运！

- Kate

没有必要设置宽度，但如果您想保持一致性，这会有所帮助。 - Jon Egeland

没错，但是楼主还没有标记一个正确答案，所以我想继续帮助，以防这是必要的修复（因为给出的信息相当模糊）。 - Kate

1

在子div中添加以下内容：

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

- Razvan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Musa · Accepted Answer

你可以使用 float:left 或者 display:inline-block。

浮动

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

FIDDLE

内联块级元素

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

演示

注意

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

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

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