css - 使用列数，如果分辨率更小，您可以动态地从 3 列更改为 2 列吗？

Question

我正在使用该column-count属性来设置一个页面，该页面在三列中有多个 div，这在大屏幕上看起来很棒。每个 div 都有一个固定的宽度，比如 500 像素（包含图像）。

然而，当在较小的屏幕上工作时，浏览器会尝试将原始 \three 列中的内容强制转换为两列。当内容开始重叠时，是否有首选的最佳方法让内容转到两列？

score 13 · Accepted Answer

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

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

score 2 · Accepted Answer

@media (max-width: 500px) {
  .your element selector here {
 -webkit-column-count: 2;
  -moz-column-count:    2;
  column-count:         2;

  }
}

2 回答 2