css - css の column-break のような行区切り機能

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 プロパティを使用すると、これを垂直に行うことができます。私の例を確認してください。

これを横向きにしたい。助言がありますか？

Answer 1

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