CSS 列和边距问题

Question

更新：适用于所有浏览器的最新代码位于此 JSFiddle - https://jsfiddle.net/webvitaly/yu00ugft/5/

我正在尝试使用纯 CSS 方法制作响应式列。

我遇到一个问题，有时列的顶部有 gap/margin。

JSFiddle link 尝试探索 - https://jsfiddle.net/webvitaly/yu00ugft/

如何解决？

CSS:

.fx-columns {
  background: yellow;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
}

.fx-columns-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

.fx-columns-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}

.fx-columns .fx-column {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
  background: pink;
  clear: both;
  margin-bottom: 20px;
}

HTML:

<div class="fx-columns fx-columns-4">
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
</div>

Answer 1

您可以将top-margin和top-padding设置为零来解决这个问题。您可以使用 CSS 通用 (*) 选择器：

*{padding-top:0; margin-top:0;}

但请记住，通用选择器样式将应用于整个页面。

Answer 2

目前，您正在防止内容在列之间中断。但是，浏览器会破坏列之间的 margin，这会导致某些列无法从顶部开始。

将此添加到您的 css：

.fx-column {
  display: inline-block;
}

然后您必须为列指定固定宽度。

但是请注意，使用列数 css 属性存在很多问题。有关详细信息，请参阅此 article。

编辑： 如果您希望列宽响应，只需将它们设置为 width: 100% 以便它们随着浏览器的扩展而扩展。

CSS 列和边距问题

CSS columns and margin issue

css

css-multicolumn-layout