css column多列布局

最新推荐文章于 2023-11-23 14:31:09 发布

zdl_01

最新推荐文章于 2023-11-23 14:31:09 发布

阅读量1.6k

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/zdl_01/article/details/79780697

版权

前端学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

此文借鉴于https://www.w3.org/TR/2017/WD-css-multicol-1-20171005/#the-multi-column-model

column-width属性能够设置一个容器中的内容的列宽，当内容超出列宽后，超出的内容会流向下一列中，列数取决于内容的多少和窗口的大小这两个因素，使用方法如下：

<style>
#container{
    column-width:100px;
    background:pink;
    font-size:22px;
}
</style>
<body>
    <div id="container">
        container容器的内容超过设置的宽度100px后就会自动扩展为两行 并且第二行的宽度也超过100px后将会产生一个间距，在右侧自动产生新的一列，知道这两行全部被占满后才会扩展出第三行，以此类推。
    </div>
</body>

效果如下图：
多列布局

column-count属性可以设置固定列数，列宽将取决于可用的宽度，使用方法如下：

<style>
#container{
    column-count: 2;
}

效果如下图：
固定列数

也可以使用columns属性同时设置列数和列宽，当colnums属性值为数字时表示列数，属性值为长度单位时表示列宽。同时设置时会优先显示列数而忽略列宽。代码如下：

<style>
#container{
    columns: 2 100px;
}

column-gap属性用来设置列间距
column-rule属性类似于border属性，用来填充间距样式
使用规则如下：

<style>
#container{
    column-gap: 10px;
    column-rule: 1px solid black;
}

效果如下图所示：

column-rule如同border一样是一种简称，可以扩展为如下属性：

column-rule-width:1px;
column-rule-color:black;
column-rule-style:solid;

column-span属性表示一个元素可以跨越多少列(none || all),如果设置为all，则当前元素会占满整个容器宽度。
使用规则如下：

<style>
  #container {
    width: 400px;
    columns: 4;
    background: #ffde94;
    font-size: 23px;
    column-rule: 3px solid red;
    column-gap: 10px;
  }
  h2 {
    column-span: all;
    background: purple;
  }
</style>
<body>
  <div id='container'>
    内容内容内容内容内容内容内容内容内容内容内容内容内容
    <h2>内容a内容a内容a内容a内容a</h2>
    <h6>内容b内容b内容b内容b内容b</h6>
    内容c内容c内容c内容c内容c内容c内容c
  </div>
</body>

效果如下图所示：
这里写图片描述
但当为容器设置固定高度时，高度小于22px时，高度超过22px的文本会被隐藏，而设置为column-span: all的元素依然全部显示，未被隐藏。
代码如下：

<style>
  #container {
    width: 400px;
    height: 21px;
    columns: 4;
    background: #ffde94;
    font-size: 23px;
    column-rule: 3px solid red;
    column-gap: 10px;
  }
  h2 {
    column-span: all;
    background: purple;
  }
</style>

效果如下：

这里写图片描述

关于多列布局的10种属性的用法：

属性	可用的值	默认值	适用
column-width	auto / 数字	auto	块级包含框(除table)
column-count	auto / 长度值	auto	块级包含框(除table)
columns	column-width / column-width
column-gap	长度值(百分比) / normal	normal	多列元素
column-rule	column-rule-width /(&) column-rule-style /(&) column-rule-color
column-rule-width	类似于border-width	medium	多列元素
column-rule-style	类似于border-style	none	多列元素
column-rule-color	类似于border-color	当前颜色	多列元素
column-fill	auto / balance / balance-all	balance	多列元素
column-span	none / auto	none	在流中的块级元素

zdl_01

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
css column多列布局

此文借鉴于https://www.w3.org/TR/2017/WD-css-multicol-1-20171005/#the-multi-column-modelcolumn-width属性能够设置一个容器中的内容的列宽，当内容超出列宽后，超出的内容会流向下一列中，列数取决于内容的多少和窗口的大小这两个因素，使用方法如下：&lt;style&gt;#container{ col...
复制链接

扫一扫

专栏目录