行中断功能，如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; }