如何将特定内容限制在一栏而不是跨越多栏？

Question

我正在尝试将每个 header 和段落限制为仅在一列中，而不是在空间用完时自动格式化以转到下一列。

.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

使用 break-inside: avoid; CSS 属性.

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

/* 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>

Answer 2

为每个 <p> 元素设置一个 display: inline-block。这样，它们将在各自的列中 self-contained。但请记住，这不会阻止 header 溢出到其他列，如下图所示：

但是，如果您可以用 <div> 包装每个 header-column 对，那么您只需将 display: inline-block; 应用于该容器，如下图所示：

或者，正如 torazaburo 指出的那样，您可以使用 break-inside: avoid; 来防止元素拆分。我习惯于使用 display: inline-block，因为它还可以减少元素中不需要的大小并使它们更易于管理（在这种情况下，在声明列布局时让它们像这样甚至是有意义的），但是另一个属性为您的特定案例提供完全相同的功能。

如何将特定内容限制在一栏而不是跨越多栏？

How do you restrict specific content to only one column instead of going across multiple columns?

html

css

css-multicolumn-layout