CSS多列布局，列间距在窗口调整大小时不会改变答案

【问题标题】：CSS multi-column layout with column gap not changing on window resizeCSS多列布局，列间距在窗口调整大小时不会改变
【发布时间】：2012-10-13 10:18:17
【问题描述】：

我正在尝试制作一个多列布局，其中每一列都填充有图像。列的容器必须有水平滚动，但在窗口调整大小时列间距不能改变，最后一列必须能够在一侧显示。

列的高度取决于父容器，当窗口高度改变时，必须重新排列图像以便用整个图像填充列（不应水平剪切图像）。

img {
    height: 70px;
    width: 100px;
}

.container
{ 
    height:400px; 
    overflow-x: scroll; 
    overflow-y: hidden;
    -webkit-column-width: 100px;
    column-width: 200px;
    -webkit-column-gap: 20px;
    column-gap: 20px;
}

这是我目前拥有的一个 jsfiddle： http://jsfiddle.net/9dL2F/1/

您对如何做到这一点有任何想法吗？

【问题讨论】：

标签： css clipping multiple-columns window-resize

【解决方案1】：

这很棘手。容器的整个宽度分为列，因此您不能同时拥有固定的列宽和列间隙。随着容器宽度的变化，浏览器想要填充容器。见Fixed gap between CSS columns。

你可以管理.container的宽度：（见jsfiddle）

@media (min-width: 480px) { .container { width: 480px; } }
@media (max-width: 480px) and (min-width: 360px) { .container { width: 360px; } }

...但是要管理很多查询！

垂直排列的图像重要吗？如果行没问题，您可以放弃 CSS3 列：

img { display: inline-block; width: 100px; height: 70px; margin-right: 20px;}

同样，你可以浮动：

img { float: left; width: 100px; height: 70px; margin-right: 20px;}

我没用过，也不支持IE，不过你可以试试CSS3 Flexboxes。

这些都不漂亮，但我不知道一个漂亮的解决方案......也许 CSS4 会拯救我们？

【讨论】：

【解决方案2】：

安森先生说得对。我应该管理其他列：

2 个左列固定位置，1 个右列固定位置和内容（或者，容器自动调整大小取决于浏览器窗口，如下所示：

.in-content{
position:absolute;
height:auto;
color:#2d2d2d;
float:left;
left:280px;
top:33px;
bottom:auto;
right:14%;
padding:0px 10px 39px 0px;
text-align:justify;
text-decoration:none;
text-transform:none;
z-index:-33;
overflow:auto;
}
@media (min-width:27%) {.in-content{width:40%;}}
@media (max-width:40%) and (min-width:27%) {.in-content{width:27%;}}

就这些了^_^ 谢谢。

【讨论】：