修复了CSS列之间的差距

Question

我正在尝试使用CSS列创建流动内容，但是当我横向调整浏览器窗口大小时，我遇到了列之间的间隙重新调整的问题。有没有办法让柱间隙固定？似乎column-gap CSS属性只允许您设置最小列间隙，并且随着视口的扩展，间隙会按比例增加。

这是我现在拥有的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;
}