CSS多列布局，列间距在窗口大小不变 [英] CSS multi-column layout with column gap not changing on window resize

问题描述

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

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

  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我目前有：
< a href =http://jsfiddle.net/9dL2F/1/ =nofollow> http://jsfiddle.net/9dL2F/1/

$ b $

解决方案

这是很棘手的问题。容器的整个宽度被分成列，因此您不能同时具有固定的列宽和列间距。随着容器的宽度改变，浏览器想要填充容器。请参见固定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;} 
  

同样，你可以float：

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

我没有使用它们， ，但您可以尝试 CSS3 Flexboxes 。

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

I am trying to make a multi-column layout where each column is filled with images. There must be horizontal scroll for the container of the columns, but the column gap must not change on window resize, and the last column must be able to be shown clipped on the one side.

The coloumn height depends on the parent container and when the window height is changed, the images must be reаrranged in order to fill the column with whole images (an image should not be clipped horizontally).

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

Here is a jsfiddle of what I currently have: http://jsfiddle.net/9dL2F/1/

Do you have any ideas how this can be done?

解决方案

This is tricky. The container's entire width is divided into columns, so you can't have both a fixed column-width and column-gap. As the container's width changes, the browser wants to fill the container. See Fixed gap between CSS columns.

You could manage the width of .container: (see jsfiddle)

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

...but that's a lot of queries to manage!

Does vertically-ordered images matter? If rows are fine, you could abandon CSS3 columns:

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

Similarly, you could float:

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

I haven't used them, and there is no IE support yet, but you could try CSS3 Flexboxes.

None of these are pretty, but I don't know of a beautiful solution...maybe CSS4 will save us?

这篇关于CSS多列布局，列间距在窗口大小不变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！