首頁 > web前端 > css教學 > 多列佈局的概念是什麼? CSS多列佈局的應用(實例程式碼)

多列佈局的概念是什麼? CSS多列佈局的應用(實例程式碼)

不言
發布: 2018-08-06 14:27:34
原創
3318 人瀏覽過

這篇文章要跟大家介紹的內容是關於多列佈局的概念是什麼? CSS多列版面的應用(實例程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

多列佈局

CSS3 可以將文字內容設計成像報紙一樣的多列佈局,如下實例:

多列佈局的概念是什麼? CSS多列佈局的應用(實例程式碼)

程式碼如下(具體的解釋也在程式碼中)
瀏覽器支援
表格中的數字表示支援該方法的第一個瀏覽器的版本號。

緊接在數字後面的 -webkit- 或 -moz- 為指定瀏覽器的前綴。
多列佈局的概念是什麼? CSS多列佈局的應用(實例程式碼)

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>Document李波</title>
    <style>
        .p {
            /*控制列数*/
            -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;

        }



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



    <p>

        </p><h1>我的爱好</h1>
        <h3>第一段内容</h3>
        <p>
            <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>

    


登入後複製

相關文章推薦:

css圖片滾動程式碼怎麼寫?輪播圖橫向捲動展示

css3中新增屬性:css3多列佈局屬性的總結(附實例)

以上是多列佈局的概念是什麼? CSS多列佈局的應用(實例程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板