CSS3列与保证金问题的子项w//Chrome

CSS3 Columns children with margin issue w// Chrome

本文关键字：Chrome 保证金 问题 CSS3      更新时间：2023-09-26

http://dev.metertech.co.uk/technologies/patents-and-licensing

在上面的页面上，您可以看到第二列是从顶部向下推的。

在调整页面大小时，问题会自行更正。

所有其他页面，即使对于.content具有相同数量的<p>标记的页面，也能正确地呈现列。

我不知道怎样才能使它正确对齐。有什么想法吗？

以下是我认为你可能会发现相关的风格。

.page .content {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
}
.content p {
  margin: 0 0 15px;
}
p {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
body {
  font-size: 15.5px;
  letter-spacing: 0.4px;
  line-height: 2;
}

尽管我没有对此问题的解释，但您是否尝试过在段落中使用display: inline-block？应用它似乎可以解决chrome的问题。

.content p {
    display: inline-block;
}
相关文章：