如何將特定內容限制爲只有一列而不是跨多列？

Question

我試圖限制每個標題和段落只能分開一列而不是自動格式化，以便在空間不足時轉到下一列。

.columns { 
 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
    column-count: 3; 
 
} 
 

 
.div1 { 
 
    width: 100%; 
 
    padding: 10px; 
 
    border-right: 2px solid; 
 
    border-left: 2px solid; 
 
    margin: 0; 
 
    background-color: white; 
 
}

<div class="div1"> 
 
    <div class="columns"> 
 
     <h4>Landscaping</h4> 
 
     <p>As Northeast Ohio Landscapers, Hemlock Landscapes has been caring for customers and their properties throughout the Chagrin Valley since 1981. 
 
     Our core values: 
 
     Bring a positive attitude with you each and every day 
 
     Work hard, pitch in, be helpful and productive 
 
     Be fair and respectful with all people in all encounters</p> 
 

 
     <h4>Services</h4> 
 
     <p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission. 
 
     Our mission is to unite people in positive relationships to improve lives. 
 
     This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day. If we are not improving your life then we are not living up to our mission. 
 
     Experienced in every facet of the landscape industry, we fulfill our one company… total care philosophy by meeting your every need in the following areas: 
 
     Residential Landscape Maintenance 
 
     Landscape Design/Installation 
 
     Plant Health Care</p> 
 

 
     <h4>Mission</h4> 
 
     <p>Whether you are new to the Chagrin Valley, switching landscape service providers, or need to add a service to your existing account, Hemlock Landscapes makes it easy for you.</p> 
 
    </div> 
 
</div>

Answer 1

設置一個display: inline-block到每個<p>元件。這樣，它們將在各自的專欄中自成一體。但請記住，這不會阻止頭部蔓延到其他列，在此圖像中看到：

但是，如果你可以用每頭柱對用<div>，那麼你就只能到display: inline-block;適用於容器中，如本圖所示：

或者，如torazaburo指出的那樣，你可以使用break-inside: avoid;防止元素的分裂。我習慣於使用display: inline-block，因爲它還修剪了元素的不需要的大小，並使它們更容易管理（在這種情況下，當您聲明列布局時，讓它們變得更有意義），但其他屬性提供完全相同的功能爲您的具體情況。

Answer 2

使用break-inside: avoid; CSS屬性。

.columns { 
 
\t -webkit-column-count: 3; 
 
\t -moz-column-count: 3; 
 
\t column-count: 3; 
 
} 
 

 
.div1 { 
 
\t width: 100%; 
 
\t padding: 10px; 
 
\t border-right: 2px solid; 
 
\t border-left: 2px solid; 
 
\t margin: 0; 
 
\t background-color: white; 
 
} 
 

 
/* USE THIS CLASS ON A DIV SURROUNDING THE HEADER AND CONTENT */ 
 
.nobreak { 
 
    break-inside: avoid; 
 
}

<div class="div1"> 
 
<div class="columns"> 
 
<div class="nobreak"> 
 
<h4>Landscaping</h4> 
 
<p>As Northeast Ohio Landscapers, Hemlock Landscapes has been caring for customers and their properties throughout the Chagrin Valley since 1981. 
 
Our core values: 
 
Bring a positive attitude with you each and every day 
 
Work hard, pitch in, be helpful and productive 
 
Be fair and respectful with all people in all encounters</p> 
 
</div> 
 

 
<div class="nobreak"> 
 
<h4>Services</h4> 
 
<p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission. 
 
Our mission is to unite people in positive relationships to improve lives. 
 
This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day. If we are not improving your life then we are not living up to our mission. 
 
Experienced in every facet of the landscape industry, we fulfill our one company… total care philosophy by meeting your every need in the following areas: 
 
Residential Landscape Maintenance 
 
Landscape Design/Installation 
 
Plant Health Care</p> 
 
</div> 
 

 
<div class="nobreak"> 
 
<h4>Mission</h4> 
 
<p>Whether you are new to the Chagrin Valley, switching landscape service providers, or need to add a service to your existing account, Hemlock Landscapes makes it easy for you.</p> 
 
</div> 
 
</div> 
 
</div>