CSS多列布局（柵格佈局）

時間 2019-11-09

標籤 css 多列佈局柵格欄目 CSS 简体版

原文原文鏈接

1、多列布局

CSS3 能夠將文本內容設計成像報紙同樣的多列布局，以下實例:html

代碼以下（具體的解釋也在代碼中）
瀏覽器支持
表格中的數字表示支持該方法的第一個瀏覽器的版本號。web

緊跟在數字後面的 -webkit- 或 -moz- 爲指定瀏覽器的前綴。

（圖片來源：http://www.runoob.com）瀏覽器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document李波</title>
    <style>
        .div {
            /*控制列數*/
            -moz-column-count: 3;
            /* Firefox */
            -webkit-column-count: 3;
            /* Safari and Chrome */
            column-count: 3;

            /*控制列和列之間的寬*/
            -moz-column-gap: 90px;
            /* Firefox */
            -webkit-column-gap: 90px;
            /* Safari and Chrome */
            column-gap: 90px;

            /*控制列和列之間的線*/
            -webkit-column-rule-style: dashed;
            /* Chrome, Safari, Opera */
            -moz-column-rule-style: dashed;
            /* Firefox */
            column-rule-style: dashed;

            /*控制列和列之間線的寬度*/
            -webkit-column-rule-width: 1px;
            /* Chrome, Safari, Opera */
            -moz-column-rule-width: 1px;
            /* Firefox */
            column-rule-width: 1px;

            /*控制列和列之間線的顏色*/
            -webkit-column-rule-color: green;
            /* Chrome, Safari, Opera */
            -moz-column-rule-color: green;
            /* Firefox */
            column-rule-color: green;

            /*以上的列和列之間線的寬度、顏色、以及性質均可縮寫爲「column-rule」*/
            -webkit-column-rule: 1px dashed green;
            /* Chrome, Safari, Opera */
            -moz-column-rule: 1px dashed green;
            /* Firefox */
            column-rule: 1px dashed green;

            /*若沒有設置列數，就會根據列寬走*/
            -webkit-column-width: 190px;
            /* Chrome, Safari, Opera */
            column-width: 370px;

        }



        .div h1 {
            text-align: center;
            -webkit-column-span: all;
        }
    </style>
</head>

<body>
    <div class="div">

        <h1>個人愛好</h1>
        <h3>第一段內容</h3>
        <p style="color:red">
            <b>注意:</b>( Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。）</p>
        <p>每一個人都生活在成長當中，在成長當中也會有更多的夢想，更多的堅持！慢慢凝結成成長的深海。

                我=畫畫</p>
        <h3>第二段內容</h3>
        <p>畫畫，這個愛好如此的平凡！卻感染着大部分女孩的心！看着筆在手中輕輕揮動，紙上一切都活了！走了起來！一片栩栩如生。在學校的一次美術課上，美術老師展現着別的班同窗的畫，個個栩栩如生，活靈活現！我羨慕極了！小小的心靈被這些美麗的畫驚醒了。讓我下定了決心，努力地堅持學習美術，學號美術！讓個人手用筆一揮也能描述出這種境界！</p>
        <h3>第三段內容</h3>
        <p>畫畫，這個愛好如此的平凡！卻感染着大部分女孩的心！看着筆在手中輕輕揮動，紙上一切都活了！走了起來！一片栩栩如生。在學校的一次美術課上，美術老師展現着別的班同窗的畫，個個栩栩如生，活靈活現！我羨慕極了！小小的心靈被這些美麗的畫驚醒了。讓我下定了決心，努力地堅持學習美術，學號美術！讓個人手用筆一揮也能描述出這種境界！</p>
        <h3>第四段內容</h3>
        <p>畫畫，這個愛好如此的平凡！卻感染着大部分女孩的心！看着筆在手中輕輕揮動，紙上一切都活了！走了起來！一片栩栩如生。在學校的一次美術課上，美術老師展現着別的班同窗的畫，個個栩栩如生，活靈活現！我羨慕極了！小小的心靈被這些美麗的畫驚醒了。讓我下定了決心，努力地堅持學習美術，學號美術！讓個人手用筆一揮也能描述出這種境界！</p>
        <h3>第五段內容</h3>
        <p>畫畫，這個愛好如此的平凡！卻感染着大部分女孩的心！看着筆在手中輕輕揮動，紙上一切都活了！走了起來！一片栩栩如生。在學校的一次美術課上，美術老師展現着別的班同窗的畫，個個栩栩如生，活靈活現！我羨慕極了！小小的心靈被這些美麗的畫驚醒了。讓我下定了決心，努力地堅持學習美術，學號美術！讓個人手用筆一揮也能描述出這種境界！</p>

    </div>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。