Question

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

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

我有一个问题，其中列有时在顶部有间隙/边距。

JSFiddle链接尝试和探索 - 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

目前，您要保持内容不会在列之间中断。但是，浏览器会在列之间中断margin，这会导致某些列无法从顶部开始。

将此添加到您的css：

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

然后，您必须为列提供固定的宽度。

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

修改：如果您希望列宽响应，可以将它们设置为width: 100%，以便在浏览器扩展时展开。

Answer 2

您可以将top-margin和top-padding设置为零来解决此问题。您可以使用CSS universal（*）选择器：

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

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

CSS列和保证金问题

2 个答案: