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

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

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

Answer 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会救我们？

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

这就是^ _ ^ 感谢。

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

2 个答案: