html - CSS 阻止列表在列之间拆分

Question

经过一些研究，我仍然找不到我要找的东西，我想确保我想要的东西是可能的。

对于站点地图页面，我有链接列表，每个链接都在 h3 标签下，但不希望列表在两列之间拆分。

有什么线索吗？

谢谢

CSS

    .info-col{
    max-width:720px;
    columns:350px 2;
    -webkit-columns:350px 2; /* Safari and Chrome */
    -moz-columns:350px 2; /* Firefox */
    }

    .info-blob{
}

HTML

<div class="info-col">
  <div class="info-blob">
    <h3>Lorem ipsum</h3>
    <ul>
      <li><a href="#">Lorem ipsum dolor sit</a></li>
      <li><a href="#">Aliquam tincidunt mauri</a></li>
      <li><a href="#">Nunc dignissim risus id</a></li>
      <li><a href="#">Cras ornare tristique</a></li>
      <li><a href="#">Vivamus vestibulum nulla</a></li>
      <li><a href="#">Praesent placerat risus</a></li>
    </ul>
  </div>
  <div class="info-blob">
    <h3>Lorem ipsum</h3>
    <ul>
      <li><a href="#">Nunc dignissim risus id</a></li>
      <li><a href="#">Cras ornare tristique</a></li>
      <li><a href="#">Vivamus vestibulum nulla</a></li>
      <li><a href="#">Praesent placerat risus</a></li>
      <li><a href="#">Lorem ipsum dolor sit</a></li>
      <li><a href="#">Aliquam tincidunt mauri</a>
        <ul>
          <li><a href="#">Nunc dignissim risus id</a></li>
          <li><a href="#">Cras ornare tristique</a></li>
          <li><a href="#">Vivamus vestibulum nulla</a></li>
          <li><a href="#">Praesent placerat risus</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="info-blob">
    <h3>Lorem ipsum</h3>
    <ul>
      <li><a href="#">Lorem ipsum dolor sit</a></li>
      <li><a href="#">Aliquam tincidunt mauri</a></li>
      <li><a href="#">Nunc dignissim risus id</a></li>
      <li><a href="#">Cras ornare tristique</a></li>
      <li><a href="#">Vivamus vestibulum nulla</a></li>
      <li><a href="#">Praesent placerat risus</a></li>
    </ul>
  </div>
  <div class="info-blob">
    <h3>Lorem ipsum</h3>
    <ul>
      <li><a href="#">Vivamus vestibulum nulla</a></li>
      <li><a href="#">Praesent placerat risus</a></li>
      <li><a href="#">Lorem ipsum dolor sit</a></li>
      <li><a href="#">Aliquam tincidunt mauri</a></li>
      <li><a href="#">Nunc dignissim risus id</a></li>
      <li><a href="#">Cras ornare tristique</a></li>
      <li><a href="#">Vivamus vestibulum nulla</a></li>
      <li><a href="#">Praesent placerat risus</a></li>
    </ul>
  </div>
</div>

Answer 1

在 .info-blob 上使用 column-break-inside:

.info-blob {
    -webkit-column-break-inside : avoid;
    -moz-column-break-inside : avoid;
    column-break-inside : avoid;
}

作为替代方案，如果您希望它是跨浏览器的，请将您的 CSS 替换为:

.info-blob {
    display: inline-block;
}