CSS3 列，如果宽度小则减少数量

Posted 2023-03-06

【中文标题】CSS3 列，如果宽度小则减少数量

【英文标题】：CSS3 columns, reduce number if small width

【发布时间】：2013-11-28 23:32:39

【问题描述】：

是否可以使用具有最小列宽的 CSS3 列？这样如果容器的大小被调整为小于当前列数，那么列数会减少吗？

例如这个 html http://jsfiddle.net/3LStR/。有3列。如果.cols3 div 的宽度低于 400px，我希望它变成两列；

我找到了这个参考：http://www.w3schools.com/cs-s-ref/css3_pr_column-width.asp，但这没有帮助。

如果总宽度允许，我想要三列，

<---------------------------------->

<-------><-------><------->

但如果总宽度更小，我想要更少的列：

<----------------------->

<-------><------->

和

<--------------->

<------->

如果总宽度更大，我仍然只想要三列：

<------------------------------------------------------------>

<-------><-------><------->

【问题讨论】：

我们谈论的是网页上动态调整大小的容器还是视口（屏幕）的大小？

【参考方案1】：

假设您可以只基于窗口宽度的列而不是容器，这就是媒体查询派上用场的地方。

给你的容器width:100%，然后在你希望它停止拉伸的地方设置一个max-width，在本例中是600px。

.cols3 
   width: 100%;
   max-width: 600px;

将您的列设置包装在媒体查询中以获得您希望列开始显示的最小宽度 (400px)：

@media (min-width: 400px) 
  .cols3 
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    -webkit-column-rule: 1px solid #000;

    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -moz-column-rule: 1px solid #000;

    column-count: 2;
    column-gap: 20px;
    column-rule: 1px solid #000;
  

最后，为你想要的最大列数设置你想要的正确大小的最后一个断点 (600px)：

@media (min-width: 600px) 
  .cols3 
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  

示例： http://jsfiddle.net/shshaw/A6vjv/show/

代码： http://jsfiddle.net/shshaw/A6vjv/

同样，这是基于窗口宽度，而不是实际容器宽度。您可能需要根据容器的样式和在文档中的位置进行调整。否则，您将需要一些花哨的 javascript 来单独基于容器执行断点。