修复了CSS列之间的差距

Question

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

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

编辑:这是一个示例jsFiddle与相应的HTML/CSS:http://jsfiddle.net/4cqbr/1/.我正在尝试创建一个横向滚动的帖子集合,这些帖子是固定宽度,可变高度.调整"结果"区域的大小时,可以看到列间隙扩展和收缩.

Answer 1

列间隙仅改变大小，因为您在列上设置了硬宽度。你不可能拥有一个具有所有硬设置宽度的流体布局，某些东西必须是流体的。

这是一个具有流体柱和一致间隙的示例。

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