複数の列にまたがるのではなく、特定のコンテンツを1つの列に限定するにはどうすればよいですか？

Question

私はそれぞれのヘッダーと段落が、自動的にフォーマットされるのではなく、1列だけ離れていることを制限して、空きがなくなったときに次の列に移動しようとしています。

.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

。この方法で、彼らはそれぞれの列に自己完結します。あなたは、その後、<div>で各ヘッダ列のペアをラップすることができれば、

をしかし：しかし、これは、この画像に見られるように、他の列にこぼれるからヘッダを防ぐことはできませんことを心に留めておいてください。ちょうどこの画像に見られるように、そのコンテナにdisplay: inline-block;を適用する必要があります：

あるいは、 torazaburo が指摘したように、あなたが防ぐためにbreak-inside: avoid;を使用することができます要素の分割。私はdisplay: inline-blockを使用することに慣れています。これは、要素から不要なサイズをトリミングして管理しやすくするためです（この場合は、列レイアウトを宣言するときと同じようにすることも意味があります）。あなたの特定の場合にまったく同じ機能です。

Answer 2

break-inside: avoid; CSSプロパティを使用します。各<p>要素にdisplay: inline-blockを設定

.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>