html - 修复了 CSS 列之间的间隙

Question

我正在尝试使用 CSS 列创建流动内容，但我遇到了一个问题，即当我水平调整浏览器窗口大小时，列之间的间隙会重新调整。有什么办法可以固定列间隙吗？ column-gap CSS 属性似乎只允许您设置最小 列间隙，并且随着视口(viewport)的扩大，间隙会按比例增加。

这是我现在拥有的 CSS:

column-gap: 5px;
-moz-column-gap: 5px;
-webkit-column-gap: 5px;
column-width: 240px;
-moz-column-width: 240px;
-webkit-column-width: 240px;

然后我在里面有固定宽度的 div，并且有 display: inline-block。

编辑:这是一个带有适当 HTML/CSS 的示例 jsFiddle:http://jsfiddle.net/4cqbr/1/ .我正在尝试创建一个横向滚动的固定宽度、可变高度的帖子集合。当您调整“结果”区域的大小时，您可以看到列间距扩大和缩小。

Answer 1

列间距只是改变大小，因为您在列上设置了硬宽度。您不能拥有具有所有硬设置宽度的流畅布局，某些东西必须是流畅的。

这里是 an example具有流体柱和一致的间隙。

p{
  column-width: 240px;
  column-gap: 2em;            
  padding: 5px; 
  text-align:justify;
}