当前位置:首页 > 高端品牌官网建设

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

2019-12-22

在关于CSS Grid Layout和Flexbox的所有兴奋中,常常忽略另一种布局方法。在本文中,我将介绍多列布局-通常称为multicol或有时称为“ CSS列”。您会发现它适合执行哪些任务,以及在创建列时要注意的一些事项。

什么是Multicol?

multicol的基本思想是,您可以获取大量内容并将其分成多列,例如在报纸上。通过使用两个属性之一来执行此操作。column-count属性指定您希望内容分成的列数。column-width属性指定理想的宽度,使浏览器可以确定可以容纳多少列。

变成multicol容器的内容中包含哪些元素并不重要,所有内容均保持正常流动,但分成几列。这使得multicol不同于我们今天在浏览器中使用的其他布局方法。以Flexbox和Grid为例,采用容器的子元素,然后这些项目将参与Flex或网格布局。使用multicol时,除了在列中之外,您仍然具有正常的流程。

在下面的示例中,我使用column-width,以显示至少为的列14emMulticol会分配尽可能多的14em列,然后共享这些列之间的剩余空间。14em除非我们只能显示一列,否则列将至少为,在这种情况下,列可能会更小。Multicol是我们第一次在CSS中看到这种行为,创建的列默认情况下是必须响应的。您不需要添加“媒体查询”并更改各种断点的列数,而是可以指定最佳宽度,浏览器即可解决。

免费获取报价

  • 29923329

  • 杭州市丰庆路498号北软智慧科创大厦203

  • 0571-85815193

  • pady@1t2.cn

网站地图 版权所有 © 2008-2021 杭州派迪科技有限公司  Copyright © 2008-2020  www.hzpady.com  All Rights Reserved    浙ICP备14029905号-1     公安备案:33010802008411    软著登字第3457658号