Html CSS阻止列表在列之间拆分

经过一段时间的研究，我仍然找不到我想要的，我想确保我想要的是可能的

对于站点地图页面，我有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>

乱数假文








乱数假文















乱数假文








乱数假文

在

信息blob

容器上使用

内部中断：避免使用
（以及相关供应商前缀版本）

使用Webkit前缀-我不太熟悉
-moz-
的确切前缀，但应该不太难理解；）
 在
上使用
分栏符

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

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

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

所以你希望它是标记中的一个列表，但仍然分割为多个列？我不希望列表在两个列之间分割，我希望多个列表，站点的每个部分一个。你想要什么？代码的JSFIDLE：不清楚您在问什么。您当前的代码输出为两列，您能更好地解释问题吗？很好，不知道CSS也有列功能：）此代码在大多数浏览器上不起作用：据我所知，它只在Opera上起作用。您真漂亮，我知道如果可以排序，这将是一个简单的修复！Cheers Sit仅在chrome中工作：（有没有其他方法可以实现我想要的？@WissamEl Kik它在chrome下工作，对于IE10+和Firefox，谢谢这里有足够的内容让我来摆弄它，实现我需要的。非常感谢