CSS多列布局，窗口大小不会改变列间隙

Question

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

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

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/

你有什么想法可以做到这一点吗？

Answer 1

这很棘手。 容器的整个宽度分为列，因此您不能同时具有固定的列宽和列间距。 随着容器宽度的变化，浏览器想要填充容器。 请参阅CSS列之间的固定间隙 。

你可以管理.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会救我们？

Answer 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%;}}

这都是^ _ ^谢谢。