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

這都是^ _ ^謝謝。