CSS grundlegendes mehrspaltiges Layout

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================*/

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=================*/

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=================*/

   Die beiden Methoden erzielen den gleichen Effekt, wie unten gezeigt:
   

---

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!