Question

如何指定css div容器以强制执行类似行的行为，这样当第一个“列”中的元素超出容器的高度时，元素将继续在下一个“列”中继续容器。我的目标不是指定列，而只指定i）容器高度和ii）元素填充“列”所需的任何属性。

谢谢，

里尔

Answer 1

与指定任何 div的方式相同，您可以为其指定class或id。

关于您使用div来强制执行“类似列”行为的意图，您仅限于CSS列的有限实现：

#div_id {
  -moz-column-width: 10em;
  -webkit-column-width: 10em;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  -moz-column-rule: 1px solid #000;
  -webkit-column-rule: 1px solid #000;
  column-width: 10em; /* not well-implemented yet. */
  column-gap: 1em;
  column-count: 3;
  column-rule: 1px solid #000;
}

如果指定-vendor-column-count: 3并省略-vendor-column-width，则浏览器将实现3列，其宽度由呈现引擎自动计算，相反，如果指定-vendor-column-width: 10em而未指定-vendor-column-count 1}}浏览器将计算要显示的适当列数。

显然，这些CSS3属性仅由Chrome / Safari（-webkit）和Firefox（-moz）实现。

对于跨浏览器支持，您需要使用JavaScript解决方案（或使用服务器端技术）：List Apart有article that references a JS implementation。

指定一个css div容器，以便超过其高度的元素继续在其下一个“列”中

1 个答案: