如何讓div換行？

Question

<div class="page"> 
    <div class="left-column"> 
    <div class="content">some text</div> 
    <div class="content">some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text,</div> 
    <div class="content">some text</div> 
    <div class="content">some text</div> 
    <div class="content">some longer text, some longer text, some longer text, some longer text,some longer text,some longer text,some longer textsome longer text,some longer text,some longer text,some longer text,some longer text,some longer text</div> 
    </div> 
    <div class="right-column"> 
</div> 

.page{ 
    width:450px; 
    height: 300px; 
    border: 1px solid; 
} 
.left-column{ 
    background-color: #E0FFF4; 
} 


.right-column{ 
    background-color: #FFE5E6 
} 
.left-column, .right-column{ 
    width: 50%; 
    height: 100%; 
    float: left; 
} 

.content{ 
    min-height: 60px; 
    margin: 15px; 
    background-color: #CEBFFF; 
} 

大家好，

當我的內容達到其包裝容器的高度，我想要的內容，打破併爲下一個DIV漂浮在下一列。

我希望它能很好地用於打印。我該如何解決這個問題？

Answer 1

下面介紹如何使用flexbox將這些div換成列。它涉及使用列柔性佈局，並將其設置爲包裝其內容。

現場演示：

.page { 
 
    width: 450px; 
 
    height: 400px; 
 
    border: 1px solid; 
 
} 
 
.column { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #E0FFF4; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
} 
 
.content { 
 
    width: calc(50% - 30px); 
 
    min-height: 60px; 
 
    margin: 15px; 
 
    background-color: #CEBFFF; 
 
}

<div class="page"> 
 
    <div class="column"> 
 
    <div class="content">1. some text</div> 
 
    <div class="content">2. some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text,</div> 
 
    <div class="content">3. some text</div> 
 
    <div class="content">4. some text</div> 
 
    <div class="content">5. some longer text, some longer text, some longer text, some longer text,some longer text,some longer text,some longer textsome longer text,some longer text,some longer text,some longer text,some longer text,some longer text</div> 
 
    </div> 
 
</div>

的jsfiddle版本：https://jsfiddle.net/Lt7cso3m/2/