CSS多列布局断行-优快云博客

1、column-break-inside

auto :既不强迫也不禁止在元素内部断行并产生新列
avoid：避免在元素内部断行并产生新列

2、实例效果

源代码：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS多列断行</title>
    <style type="text/css">
    .container{
        border: 1px solid gray;
        columns: 3;
        width: 500px;
        padding: 20px;
    }
    .box{
        width: 89px;
        height: 89px;
        border: 1px solid red;
        margin: 5px;
    }
    .container1{
        border: 1px solid gray;
        columns: 3;
        width: 500px;
        padding: 20px;
        margin-top: 10px;
    }
    .box1{
        width: 89px;
        height: 89px;
        -webkit-column-break-inside:avoid;
        column-break-inside:avoid;
        border: 1px solid red;
        margin: 5px;
    }
    </style>
</head>
<body>
    <p>column-break-inside:默认值</p>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
    </div>
    <p>-webkit-column-break-inside:avoid;
        column-break-inside:avoid;</p>
    <div class="container1">
        <div class="box1">1</div>
        <div class="box1">2</div>
        <div class="box1">3</div>
        <div class="box1">4</div>
        <div class="box1">5</div>
    </div>
</body>
</html>

运行效果：

image.png