0

我在动态创建的主 div 中有一系列 div，结果如下所示

<div id="main_div">
  <div class="subdiv" style="width: 200px"> </div>
  <div class="subdiv" style="width: 400px"> </div>
  <div class="subdiv" style="width: 900px"> </div>
  <div class="subdiv" style="width: 100px"> </div>
  <div class="subdiv" style="width: 200px"> </div>
  <div class="subdiv" style="width: 300px"> </div>
  <div class="subdiv" style="width: 20px"> </div>
  <div class="subdiv" style="width: 600px"> </div>
<div/>

如果总宽度超过容器的宽度，我想打破一个 div。

这个

|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾container‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|
|                                                                      | 
|‾‾‾‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|
|   subdiv1    |       subdiv2      |       subdiv3                                    |
|______________|____________________|__________________________________________________|
|                                                                      | 
|                                                                      | 
|______________________________________________________________________|

会变成这样：

|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾container‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|
|                                                                      | 
|‾‾‾‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|
|   subdiv1    |       subdiv2      |       subdiv3 - first part       |
|______________|____________________|__________________________________|
|                                                                      | 
|                                                                      | 
|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|                                             | 
| subdiv3-remaining      |                                             | 
|________________________|                                             | 
|                                                                      | 
|______________________________________________________________________|

使用 column-count 和 column-break 属性，您可以垂直执行此操作。检查我的例子。

我想水平地做到这一点。有什么建议么？

4

1 回答 1

0 
#main-div { overflow:hidden; }
.subdiv { float:left; }
于 2013-01-15T14:37:03.600 回答