CSS-多列布局2-斷行

java小工匠發表於2017-08-18
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


相關文章