提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

CSS 的多列布局是什么？

CSS
2023-04-18 15:03:26 时间
一、多列布局是什么？

就是用 CSS 的 column-count、column-width、column-gap、break-inside、page-break-inside 等实现多列显示的功能。

二、应用场景
1、文字多列显示

通过 column-count、column-gap、column-rule 就能做出下面多列显示效果。

multi-col-layout

新建 index.html 文件并复制下面代码到文件中，保存后用浏览器打开即可看效果。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Multicol starting point</title>
    <style>
        body {
            width: 90%;
            max-width: 900px;
            margin: 2em auto;
            font: .9em/1.2 Arial, Helvetica, sans-serif;
        }

        .container {
            column-count: 3;
            column-gap: 20px;
            column-rule: 4px dotted rgb(79, 185, 227);
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Simple multicol example</h1>

        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem
            placerat vulputate.
            Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
            tellus
            laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel,
            viverra
            egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
            Aliquam
            erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
            ornare
            egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget
            fermentum
            sapien.</p>

        <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est,
            posuere
            sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem.
            Vivamus
            tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus
            eu
            urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
            natoque
            penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
</body>

</html>
2、文字不被断句

通过 break-inside、page-break-inside 可以做到不截断内容。

multi-col-layout-frag

新建 index.html 文件并复制下面代码到文件中，保存后用浏览器打开即可看效果。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Simple multicol example, break-inside</title>
    <style>
        body {
            width: 90%;
            max-width: 900px;
            margin: 2em auto;
            font: .9em/1.2 Arial, Helvetica, sans-serif;
        }

        .container {
            column-width: 250px;
            column-gap: 20px;
        }

        .card {
            /* 取消注释即可看到，不截断内容的效果 */
            /* break-inside: avoid;
            page-break-inside: avoid; */
            background-color: rgb(207, 232, 220);
            border: 2px solid rgb(79, 185, 227);
            padding: 10px;
            margin: 0 0 1em 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="card">
            <h2>I am the heading</h2>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem
                placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
                ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.</p>
        </div>

        <div class="card">
            <h2>I am the heading</h2>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem
                placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
                ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.</p>
        </div>

        <div class="card">
            <h2>I am the heading</h2>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem
                placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
                ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.</p>
        </div>

        <div class="card">
            <h2>I am the heading</h2>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem
                placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
                ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.</p>
        </div>

        <div class="card">
            <h2>I am the heading</h2>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem
                placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
                ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.</p>
        </div>

        <div class="card">
            <h2>I am the heading</h2>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem
                placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
                ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.</p>
        </div>

        <div class="card">
            <h2>I am the heading</h2>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem
                placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
                ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.</p>
        </div>


    </div>

</body>

</html>
三、参考文档

相关文章