列数属性，不要在包含元素上换行

Question

我用 CSS 做了以下内容（见下面的截图），这正是我想要的格式，评论并排排列，略有偏移。我在这里使用 column-count: 2; css 属性。但正如您在屏幕截图中看到的那样，其中一条评论（和图片）被减半并移至下一栏。

有没有办法在单个评论（包含在单个 li 中）上不 'clip around'，但只在一个评论之后？

我的css和html基本是下面的

.reviews ul {
    column-count: 2;
    margin: 40px 0;
}

.reviews li {
    margin-bottom: 60px;
}
/* slightly more for stars etc.. but not relevant */

 <ul>
          <li>
            <span class="stars stars-2"></span>
            <p>Altijd meteen hulp als er eens iets mis gaat met mijn website. Maar eigenlijk gaat er zelden iets mis! </p>
            <div class="profile">
              <div class="profile-image"></div>
              <p>Anna Rodenburg <span class="function">Functie titel</span></p>
            </div>
          </li>
          <li>
            <span class="stars stars-3"></span>
            <p>Altijd meteen hulp als er eens iets mis gaat met mijn website. Maar eigenlijk gaat er zelden iets mis! </p>
            <div class="profile">
              <div class="profile-image"></div>
              <p>Anna Rodenburg <span class="function">Functie titel</span></p>
            </div>
          </li>
          <li>
            <span class="stars stars-4"></span>
            <p>Altijd meteen hulp als er eens iets mis gaat met mijn website. Maar eigenlijk gaat er zelden iets mis! </p>
            <div class="profile">
              <div class="profile-image"></div>
              <p>Anna Rodenburg <span class="function">Functie titel</span></p>
            </div>
          </li>
</ul>

Answer 1

Make .review li have display: inline-block to stop it being split over columns. – A Haworth 16 mins ago

成功了。

列数属性，不要在包含元素上换行

column-count property, don't wrap on containing element

css

word-wrap

column-count

列数 属性，不要在包含元素上换行

column-count property, don't wrap on containing element

css

word-wrap

column-count

列数属性，不要在包含元素上换行