7

更新：适用于所有浏览器的最新代码位于此 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>
4

2 回答 2

20

目前，您正在防止内容在列之间中断。但是，浏览器打破了margin列之间的关系，这导致某些列没有从顶部开始。

将此添加到您的CSS：

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

然后你必须给列一个固定的宽度。

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

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

于 2016-06-24T19:31:22.803 回答
0

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

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

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

于 2016-06-24T19:13:25.787 回答