固定CSS列之间的间隔

Question

固定CSS列之间的间隔

8

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

我有一些固定宽度并带有display: inline-block属性的div元素。我想创建一个横向滚动的帖子集合，这些帖子的宽度是固定的，高度是可变的。当你调整'Result'区域的大小时，你会发现列间距会扩大和收缩。这里有一个带有适当HTML/CSS的jsFiddle示例：http://jsfiddle.net/4cqbr/1/。

- Adi Dahiya

2

请发布您的网站链接或完整源代码。 - David Allen

你现在可以使用CSS网格来完成这个操作，参见这里的答案。 - Garrett

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bookcasey · Accepted Answer

列间距只因你在列上设置了固定宽度而改变。如果所有宽度都是固定的，就无法拥有流体布局，必须至少有一部分是流动的。

这里有一个具有流动列和一致间隙的示例。

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