更新:适用于所有浏览器的最新代码位于in this JSFiddle
我正在尝试使用纯 CSS 方法制作响应式列。
我遇到一个问题,即列有时在顶部有间隙/边距。
如何解决?
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
,这会导致某些列无法从顶部开始。
将此添加到您的 CSS:
.fx-column {
display: inline-block;
}
然后您必须为列指定固定宽度。
但是请注意,使用列数 css 属性存在很多问题。看这个article获取更多信息。
编辑:如果您希望列宽具有响应性,只需将它们设置为width: 100%
,以便它们随着浏览器的扩展而扩展。
关于html - CSS 列和边距问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38020462/