固定CSS列之间的差距

2018-06-02 23:08:58

我正在尝试使用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 。

编辑：这是一个示例jsFiddle与适当的HTML / CSS：http://jsfiddle.net/4cqbr/1/。我试图创建一个固定宽度，高度可变的横向滚动式文章集合。当您调整“结果”区域时，可以看到色谱柱间隙扩大并收缩。

列间距只是在更改尺寸，因为您在列上设置了较窄的宽度。你不能有一个流体布局与所有硬设置宽度，一定要流体。

这是一个流体柱和一致性差距的例子。

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

链接地址: http://www.djcxy.com/p/10389.html