css - 像 css 中的分栏一样的分行功能

Question

我在动态创建的主 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 属性，您可以垂直进行此操作。查看我的example .

我想水平地做这个。有什么建议吗？

Answer 1

#main-div { overflow:hidden; }
.subdiv { float:left; }