当前位置：文江博客话题详情

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

发布于 2024-09-24 08:19:10 字数 145 浏览 6 评论 0原文

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

谢谢，

里尔

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

秋凉 2024-10-01 08:19:10

与指定任何 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 ，浏览器将计算要显示的适当列数。

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

对于跨浏览器支持，您需要使用 JavaScript 解决方案（或使用服务器端技术）： List Apart 有一个引用 JS 实现的文章。

In the same way that you specify any div, you can give it either a class or an id.

As regards your intent to use the div to enforce 'column-like' behaviour, you're limited to either a limited implementation of CSS columns:

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

If you specify -vendor-column-count: 3 and omit the -vendor-column-width the browser will implement 3 columns with the width automatically calculated by the rendering engine, conversely if you specify the -vendor-column-width: 10em without specifying the -vendor-column-count the browser will calculate the appropriate number of columns to display.

Clearly these CSS3 properties are implemented by only Chrome/Safari (-webkit) and Firefox (-moz).

For cross-browser support you would need to use a JavaScript solution (or use a server-side technology): A List Apart has an article that references a JS implementation.

回复收藏 0 原文

~没有更多了~