CSS列和边距问题 [英] CSS columns and margin issue

问题描述

更新:适用于所有浏览器的最新代码位于此JSFiddle中-

Update: The latest code which works in all browsers is located in this JSFiddle - https://jsfiddle.net/webvitaly/yu00ugft/5/

我正在尝试使用纯CSS方法创建响应列.

I am trying to make responsive columns using pure CSS approach.

我遇到一个问题，列的顶部有时会有间隙/边距.

I have an issue where columns sometimes have gap/margin at the top.

尝试尝试探索的JSFiddle链接- https://jsfiddle.net/webvitaly/yu00ugft/

JSFiddle link to try and explore - 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>

推荐答案

当前，您正在防止内容在列之间中断.但是，浏览器破坏了列之间的 margin ，这导致某些列不在顶部开始.

Currently, you're keeping the content from breaking between columns. However, the browser breaks the margin between columns, which is causing some of the columns to not start at the top.

将此添加到您的CSS:

Add this to your css:

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

然后，您必须为列设置固定宽度.

You'll then have to give the columns a fixed width.

但是，请注意，使用列数css属性存在很多问题.有关更多信息，请参见此文章.

Know, however, that there are a lot of issues with using the column count css property. See this article for more information.

编辑:如果您希望列宽是响应性的，只需将其设置为 width:100％，以便随着浏览器的扩展而扩展.

If you want the column widths to be responsive, you can simply set them to width: 100% so that they expand as the browser expands.

这篇关于CSS列和边距问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！