Question

首先，感谢您花时间阅读本文。

我一直在使用HTML / CSS，只要我记得，但我今天遇到了一个问题，这完全困扰了我。

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

例如，

 ____________
|            |
|[1] [3] [5] | [7]
|[2] [4] [6] | [8]
|____________|

然后我将使用JS实现一个很好的滚动功能。

但是，目前我只能通过将它们设置为一行而不是两行来显示它们：

display: inline-block;

或使用相当标准的垂直滚动：

float: left;

非常感谢任何关于此的建议！

克里斯

Answer 1

将您的子元素放在行中。

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

Answer 2

使用浮动技术，在第4个div之后，像这样放置第5个DIV：

   div style="clear: both">

此第5个div不计入您的8个内容div。

Answer 3

这就是我做的事情

你可以在这里玩（http://jsfiddle.net/LAymH/2/）

在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;    
}

Answer 4

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

http://jsfiddle.net/ePq6n/

然后，如果您希望它们在容器中，如下所示：

http://jsfiddle.net/ePq6n/1/

将<div>元素强制转换为2行</div>

4 个答案: