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/

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

4

5 回答 5

5

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

漂浮

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

小提琴

内联块

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

小提琴

笔记

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

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

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

于 2012-07-08T01:04:03.920 回答
3

尝试：

.child_div {
    float: left
}

我在想的几点：

  • 我会考虑制作一个更具上下文的选择器，而不是仅仅将 child_div 向左浮动，例如：

    .parent_div > div {
    float: left;
}

    这基本上说div作为直接子级的 s.parent_div将被浮动。

  • 浮动有缺点：如果所有子容器都是浮动的，则父容器不会保留子容器的高度。因此，如果.parent_div应该是围绕孩子的边框框，您可能需要额外的 CSS 或标记。

  • display: inline-block有缺点：您可能会遇到跨浏览器兼容性问题。

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

于 2012-07-08T00:47:35.080 回答
2

如果你想让它们都排成一行，你就必须知道每一个的宽度。如果您只是希望它们像通常的文本一样连续循环，则有几种不同的解决方案。


选项1

您可以将它们视为 a 中的列表项，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，如下所示：

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

只要确保一切都在同一个tr。否则，行将换行。这样做的好处是您可以循环创建脚本以使一定数量的灵活元素连续显示，甚至无需触摸您的 css。

于 2012-07-08T01:00:08.297 回答
1

Razvan和Tuanderful所说的，但您还需要在某处设置宽度 - 无论是，还是.parent_div两者。.parent_div.child_div

祝你好运！

于 2012-07-08T00:56:50.303 回答
1

添加到 child-div 中：

.child_div{
   ...
   float: left;
   ...
 }
于 2012-07-08T00:47:44.777 回答