4

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

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

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/

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

4

2 回答 2

2

这很棘手。容器的整个宽度分为列，因此您不能同时拥有固定的列宽和列间隙。随着容器宽度的变化，浏览器想要填充容器。请参阅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 会拯救我们？

于 2012-10-26T16:16:06.280 回答
0

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

固定位置的 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%;}}

就这些了^_^谢谢。

于 2014-03-12T03:00:58.443 回答