Question

我有这样的html标记：

<ul>
  <li>
    <h2>heading</h2>
    <img src="path.jpg" />
    <p>paragraph here</p>
  </li>
  <li>
    <h2>heading</h2>
    <img src="path.jpg" />
    <p>paragraph here</p>
  </li>
....
</ul>

我正在使用多列布局：

ul{
column-count: 3;
}

但它正在从任何地方打破列，但我想避免从任何地方打破。它应该仅从li标签中断

所以，我尝试break-after https://developer.mozilla.org/en-US/docs/Web/CSS/break-after似乎不支持。我正在使用Firefox 27.1。

我也尝试过使用前缀。

Answer 1

您应该查看caniuse.com - 这是一个非常有用的地方，可以看到各种HTML5 / CSS3功能的浏览器支持。

快速搜索显示支持CSS3多列布局 - http://caniuse.com/#search=column%20layout - 看起来Firefox有部分支持，但您需要使用-moz前缀。

Answer 2

令人惊讶的是，我把display: inline-block放到了li之后，它只是在它只是在li之后的任何地方打破了，但我不知道为什么会发生这种情况。而且无需使用break-after。

Answer 3

page-break-after及其替换break-after（其中包含分页后和后续列的功能）已被Internet Explorer 10+支持多年，并且通过Opera。只有Chrome和Firefox在分页支持方面完全被打破。甚至Webkit也支持这个概念，自然使用它自己特殊的闪亮白色语法。

据我所知，由于column-break-after本身只存在-webkit-column-break-after的属性，因此它从未成为任何CSS标准的一部分。

但是，嘿，Internet Explorer是废话，对吗？它不支持标准，除非它们与现实世界完全无关，例如打印业务报告的基本分页控制。谁愿意这样做？

list-break-after不支持浏览器吗？

3 个答案: