CSS 列和边距问题答案

【问题标题】：CSS columns and margin issueCSS 列和边距问题
【发布时间】：2016-10-27 11:46:04
【问题描述】：

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

【问题讨论】：

这是由您的h3 标签上的边距折叠引起的，这将撤消：.fx-columns .fx-column { overflow: auto; } ... 或喜欢这个.fx-columns .fx-column h3 { margin-top: 0; } ... 或喜欢这个.fx-columns .fx-column { display: inline-block; }跨度>
What does `overflow:hidden` do in the following example?的可能重复
display: inline-block; 将使列不响应。
好吧，可能是，没有测试，我添加了它，因为它重置了折叠的边距......幸运的是你还有更多的选择:)

标签： css css-multicolumn-layout

【解决方案1】：

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

将此添加到您的 CSS：

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

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

但是要知道，使用列数 css 属性存在很多问题。请参阅此article 了解更多信息。

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

【讨论】：

display: inline-block; 将使列不响应。
您可以设置width: 100%，列会像它们一样展开，而不是display: inline-block。我会将其添加到我的答案中。感谢您的输入
谢谢。您的方法在所有浏览器中都运行良好。 jsfiddle.net/webvitaly/yu00ugft/5

【解决方案2】：

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

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

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

【讨论】：

如果我需要 .fx-column、h3 和 p 标签的边距和内边距怎么办？
只需添加“display: inline-block;”像 jtmingus 所说的在 fx-column 中。
只使用.fx-column > * 来处理.fx-column 的直接子元素。就我而言，这是一个可行的解决方案。