使用column-count时，如果分辨率较小，是否可以将3列动态更改为2列? [英] With column-count, can you dynamically change from 3 to 2 columns if the resolution smaller?

问题描述

我正在使用 column-count 属性设置一个页面，该页面在三列具有多个div，在较大的屏幕上看起来很棒.每个div的固定宽度为500px(包含图像).

I'm using the column-count property to set a page with multiple divs at three columns, which looks great on larger screens. Each div has a fixed width of, say, 500px (contained images).

但是，在较小的屏幕上工作时，浏览器会尝试将内容移到原始\ 3列中，而应将其移到两列中.当内容开始重叠时，是否有一种首选的最佳方法将内容分为两列?

When working on smaller screens however, the browser tries to force the content within the original \three columns when it should go to two columns. Is there a preferred best method to have the content go to two columns when the content starts to overlap?

推荐答案

如果使用 column-width 属性而不是 column-count ，浏览器将自动根据需要调整列数以填充可用空间.

If you use the column-width property, rather than column-count, the browser will automatically adjust the number of columns as needed to fill the available space.

http://codepen.io/cimmanon/pen/CcGlE

.foo {
    columns: 500px; // shorthand, prefixes may be necessary
}

这篇关于使用column-count时，如果分辨率较小，是否可以将3列动态更改为2列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！