Heim > Web-Frontend > CSS-Tutorial > CSS grundlegendes mehrspaltiges Layout

CSS grundlegendes mehrspaltiges Layout

不言
Freigeben: 2018-04-24 16:45:44
Original
1673 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das grundlegende mehrspaltige Layout von CSS vorgestellt, das einen gewissen Referenzwert hat. Jetzt kann ich es mit allen teilen, die es brauchen.

Front-End-Layout


Das Grundlayout wird hauptsächlich auf dem mobilen Endgerät angezeigt und ist auch auf das PC-Terminal anwendbar. Unterteilt in eine Spalte, zwei Spalten, drei Spalten und vier Spalten.
Hier kommen zwei Methoden zum Einsatz.
Stellen Sie zunächst den Grundstil ein:

/*==================common css start================*/
    ul{
        list-style: none;
        background: #f0f1f1;
        padding: 30px 15px;
    }
    li{
        background: #fff;
        text-align: center;
        border: 1px solid #5d2a22;
        padding: 15px;
        box-sizing: border-box;
    }
    .clearfix::after{
        content:"";
        display: block;
        clear: both;
    }
/*==================common css end================*/
/*==================html start================*/    <!--一列-->
    <ul class="one clearfix">
        <li>入选CCTV中国年度品牌</li>
        <li>获得Hair代理权</li>
        <li>签署5G筛查合作协议</li>
        <li>全国开设近20家分院</li>
    </ul>

    <!--两列-->
    <ul class="two clearfix">
        <li>入选CCTV中国年度品牌</li>
        <li>获得Hair代理权</li>
        <li>签署5G筛查合作协议</li>
        <li>全国开设近20家分院</li>
    </ul>

    <!--三列-->
    <ul class="three clearfix">
        <li>入选CCTV中国</li>
        <li>获得Hair代理权</li>
        <li>签署5G筛查合作协议</li>
        <li>全国开设近20家</li>
        <li>了解植发需求</li>
        <li> 推荐专业医师</li>
    </ul>

    <!--四列-->
    <ul class="four clearfix">
        <li>咨询</li>
        <li>定位</li>
        <li>检测</li>
        <li>定制</li>
        <li>辅助</li>
        <li>养护</li>
        <li>咨询</li>
        <li>定制</li>
    </ul>/*==================html end================*/
Nach dem Login kopieren
  1. Traditionelle Berechnungsmethode: Float + Breite präzise Berechnung

        /*==============传统(浮动+清浮动+宽度精确计算) start=================*/
            /*.one li:nth-child(n+2){
                margin-top: 15px;
            }
            .two li{
                float: left;
                width: 48%;
            }
            .two li:nth-child(even){
                margin-left: 4%;
            }
            .two li:nth-child(n+3){
                margin-top: 15px;
            }
            .three li{
                float: left;
                width: 32%;
                margin-left:2%
            }
            .three li:nth-child(3n-2){
                margin-left:0%
            }
            .three li:nth-child(n+4){
                margin-top: 15px;
            }
            .four li{
                float: left;
                width: 22%;
                margin-left:4%
            }
            .four li:nth-child(4n-3){
                margin-left: 0;
            }
            .four li:nth-child(n+5){
                margin-top: 15px;
            }*/
            /*==============传统(浮动+清浮动+宽度精确计算) end=================*/
    Nach dem Login kopieren
  2. Flex-Berechnungsmethode: Flex

            /*================flex(按照需求设置宽度) start=================*/
            /*为方便查看,这里不单独去掉clearfix类名了*/
            .clearfix::after{            content: none;        }
            ul{            display: flex;            flex-wrap: wrap;            justify-content: space-between;        }
            .one li{            width: 100%;        }
            .one li:nth-child(n+2){            margin-top: 15px;        }
            .two li{            width: 48%;        }
            .two li:nth-child(n+3){            margin-top: 15px;        }
            .three li{            width: 32%;        }
            .three li:nth-child(n+4){            margin-top: 15px;        }
            .four li{            width: 23%;        }
            .four li:nth-child(n+5){            margin-top: 15px;        }
            /*================flex(按照需求设置宽度) end=================*/
    Nach dem Login kopieren

    Die beiden Methoden erzielen den gleichen Effekt, wie unten gezeigt:
    CSS grundlegendes mehrspaltiges Layout


    Zusammenfassung

    Wenn Sie Methode verwenden Erstens müssen Sie die Breite der Elemente und den Abstand zwischen den Elementen genau berechnen. Bei geringfügigen Abweichungen wird das Layout gestört.
    Bei der zweiten Methode müssen Sie nur die Breite des Elements berücksichtigen. Verwenden Sie justify-content: space-between, um den Effekt der verteilten Zentrierung zu erzielen.
    Wenn Sie mehr über Flex-Layout erfahren möchten, lesen Sie bitte die Master-Dokumentation
    Flex-Layout-Tutorial: Grammatik http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
    Flex-Layout-Beispiel http://static.vgee.cn/static/index.html

    Verwandte Empfehlungen:

    3 Arten der Einführung von CSS Basic Syntax

    Das obige ist der detaillierte Inhalt vonCSS grundlegendes mehrspaltiges Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage