6

我正在尝试column-count在包含多个段落的标签上使用 css3 属性。在 Webkit 浏览器上，我看到了一个错误。在某些屏幕尺寸下，段落边距无法很好地跨列拆分。

这是一个屏幕截图（请注意，以单词“Duis”开头的第三段被删除，而它应该与屏幕顶部齐平）：

在此处输入图像描述

这是问题的 CodePen。我已将宽度固定为 1000 像素，因此问题对于 Chrome* / Safari 用户来说很明显。

*编辑：刚刚在 2018 年初回来查看，Chrome 不再受此错误的影响。Safari（测试 11.0.3）可以！

我试图使用page-break-*规则来强制段落以避免中断。我也尝试-webkit-perspective:1按照http://caniuse.com/#feat=multicolumn上的评论使用，但这没有效果。

有什么想法吗？

article {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  width: 1000px;
}

p {
  margin-top: 0;
  margin-bottom: 1.3em;
}
<article>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>

4

1 回答 1

7

只需在里面添加p：

display: inline-block;
于 2015-10-06T12:15:41.997 回答