column-count 属性，不要包裹在包含元素上[重复]

Question

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

有没有办法在单个评论（包含在单个 li 中）不“剪辑”，而只在一个评论之后？

我的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

使 .review li 具有 display: inline-block 以阻止它被拆分为列。 – A Haworth 16 分钟前

工作。