Html 力<；部门>；元素放在两行上

首先，感谢您抽出时间阅读本文

从我记事起，我就一直在使用HTML/CSS，但今天我遇到了一个完全困扰我的问题

我有一个容器，它有一定数量（比如说8个）的动态创建的子div。我希望容器在两行上显示子对象，即使它们水平溢出

比如说,

____________ | | |[1] [3] [5] | [7] |[2] [4] [6] | [8] |____________| ____________ | | |[1] [3] [5] | [7] |[2] [4] [6] | [8] |____________| 然后我将使用JS实现一个很好的滚动特性

但是，目前，通过将它们设置为：display:inline block，我只能让它们显示在一行而不是两行上

display: inline-block; 或者使用一个标准垂直滚动：float:left

float: left; 如果您对此有任何建议，我们将不胜感激

---

克里斯

使用浮动技术，在第四节之后，放置第五节，如下所示：

   div style="clear: both">

---

这第五个div不计入你的8个内容div

将子元素按行放置

.row { height:100px; overflow hidden;} // assuiming 100px is height of a child
.row > .children { height:100px; float:left;}

这就是我所做的

你可以在这里玩（）

在IE和FF中都工作

<div class="container">
    <div class="row-container">
        <div class="row">Text1</div>
        <div class="row">Text2</div>
        <div class="row">Text3</div>
        <div class="row">Text4</div>
    </div>

    <div class="breaker"></div>

    <div class="row-container">
        <div class="row">Text1</div>
        <div class="row">Text2</div>
        <div class="row">Text3</div>
        <div class="row">Text4</div>
    </div>
</div>

.row {
    float: left;
    border: 1px solid red;
}
.breaker{
    clear:both;
}
.row-container{
    width: 600px;
}
.container {
    width: 100px;
    overflow-x: scroll;
    border: 1px solid blue;    
}

文本1
文本2
文本3
文本4
文本1
文本2
文本3
文本4
.行{
浮动：左；
边框：1px纯红；
}
.断路器{
明确：两者皆有；
}
.行集装箱{
宽度：600px；
}
.集装箱{
宽度：100px；
溢出-x：滚动；
边框：1px纯蓝色；
}

如果您按顺序遍历项目，我认为使用列比使用行更容易：

然后，如果您希望将它们放在容器中，请执行以下操作：

---

html是什么样子的？所有的子项都是相同的宽度吗（宽度是否固定）？是的，所有的子项都是相同的宽度，固定为300px。这会起作用，但在我遇到的情况下实现起来可能会很尴尬。我应该提到的是，最“重要”的div保持在更左边，例如：uuuuuuuuuuuuuuuuuuuuuuuuuuuu124;[1][3][5][7][2][4][6][8][8][uuuuuuuuuuuuuuuuuuuuuuuuu124;我想我可以在它们上面做一个循环，把奇数放在顶部，把偶数放在底部。谢谢。假设所有div都有sime大小，您可以将每一对放入div

[1][2][3][4]

中，并将其向左浮动。现在不再使用

.row

s，您只需要一个内部div来处理溢出。这正是我需要的，真不敢相信我没有想到！非常感谢。