当前位置: 海之晶网站设计> 建站知识> 常见问题>何时以及如何使用CSS多栏布局

何时以及如何使用CSS多栏布局

文章出处:网站建设-海之晶网络 | 网站编辑:网站设计 | 发表时间:2020/9/12 8:53:28
分享:

在所有关于CSS网格布局和Flexbox的兴奋中,另一种布局方法常常被忽视。在本文中,我将介绍多栏布局,通常称为multicol,有时称为“CSS Columns”;。你会发现它适合哪些任务,以及制作专栏时需要注意的一些事项。

multicol的基本思想是,你可以像在报纸上那样,把一大块内容分成多个专栏。您可以使用两个属性中的一个来执行此操作。column count属性指定要将内容分成的列数。column width属性指定理想的宽度,让浏览器计算出可以容纳多少列。

将内容转换为多芯容器并不重要,所有内容都保持正常流,但会分成列。这使得multicol不同于我们今天浏览器中的其他布局方法。例如Flexbox和Grid,将容器的子元素和这些项目加入到flex或Grid布局中。对于multicol,除了列内部,您仍然有正常的流。

在下面的示例中,我使用列宽来显示至少14em的列。multicol分配尽可能多的14em列,然后共享列之间的剩余空间。列将至少是14em,除非我们只能显示一列,在这种情况下它可能更小。Multicol是我们第一次在CSS中看到这种行为,创建的列在默认情况下基本上是响应的。您不需要添加媒体查询,也不需要更改不同断点的列数,而是指定一个最佳宽度,浏览器将计算出它

关键字:
南京市汉中路1号国际金融中心9楼
建站热线:13815417591
免责声明: 本站部分内容来源于互联网,如果本站部分内容侵犯您的权益,请您告知,站长会立即处理。