2.9 瀑布流效果-多列布局

2.9 瀑布流效果-多列布局_第1张图片

1. column-count
说明:
属性规定元素应该被分割的列数
适用于:除table外的非替换块级元素,table,cells,inline-block元素
2. column-gap
说明:
说明:属性规定列之间的间隔大小
3. column-rule
说明:
设置或检索对象的列与列之间的边框,复合属性。
column-rule-color规定列之间规则的颜色。
column-rule-style规定列之间规则的样式。
column-rule-width规定列之间规则的宽度。
4. column-fill:auto;
说明:
每列高度统一,自动占满父元素
5. column-span:all;
说明:
all横跨所有列,none默认值
2.9 瀑布流效果-多列布局_第2张图片
在我们实际应用中,会出现内容盒子为显示完全直接换行的情况,那么我们只需设置break-inside:avoid;禁止盒子内部折行即可
例:
2.9 瀑布流效果-多列布局_第3张图片

   <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            column-count: 3;
            float: left;
            column-gap: 10px;
            width: 600px;
            height: 700px;
            border: 4px solid gray;
        }
        div {
            margin-top: 5px;
            break-inside: avoid;
        }
    style>
head>

<body>
    <div style="background-color:red;width: 200px;height: 120px;"> div>
    <div style="background-color:gold;width: 200px;height: 160px;"> div>
    <div style="background-color:yellowgreen;width: 200px;height: 190px;"> div>
    <div style="background-color:lawngreen;width: 200px;height: 100px;"> div>
    <div style="background-color:blue;width: 200px;height: 230px;"> div>
    <div style="background-color:coral;width: 200px;height: 210px;"> div>
    <div style="background-color:aqua;width: 200px;height: 184px;"> div>
    <div style="background-color:royalblue;width: 200px;height: 123px;"> div>
    <div style="background-color:indigo;width: 200px;height: 148px;"> div>
    <div style="background-color:palegreen;width: 200px;height: 193px;"> div>
body>

你可能感兴趣的:(前端学习笔记,css,前端)