固定CSS列之间的间隙

问题描述

我试图使用CSS列创建流动内容，但我遇到了问题，当我调整浏览器窗口水平调整大小之间的间隙重新调整。有什么办法使列间隙固定？看起来像 column-gap CSS属性只允许您设置最小列间距，并且随着视口扩大，间隙会按比例增加。

I'm trying to create flowing content using CSS columns, but I'm running into the problem where gaps between columns readjust when I resize the browser window horizontally. Is there any way to make the column gaps fixed? It seems like the column-gap CSS property only allows you to set a minimum column gap, and as the viewport is expanded, the gaps increase proportionally.

这是我现在的CSS：

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

然后我有内部的div是固定宽度和显示： -block 。

and then I have divs inside that are fixed width and have display: inline-block.

编辑：这里有一个适当的HTML / CSS示例jsFiddle：。
我试图创建一个横向滚动集合的固定宽度，可变高度的帖子。调整结果区域的大小时，您可以看到列间距扩大和收缩。

Here's a sample jsFiddle with the appropriate HTML/CSS: http://jsfiddle.net/4cqbr/1/.I'm trying to create a sideways-scrolling collection of posts that are fixed width, variable height. When you resize the 'Result' area, you can see that the column gap expands and contracts.

推荐答案

因为你在列上设置了一个硬宽度。

The column gap is only changing sizes because you set a hard width on the columns. You can't have a fluid layout with all hard set widths, something has to be fluid.

这里是

Here is an example with fluid columns and consistent gaps.

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

这篇关于固定CSS列之间的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！