disposition de base multi-colonnes CSS

Cet article présente principalement la disposition de base multicolonne de CSS, qui a une certaine valeur de référence. Maintenant, je la partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Mise en page frontale

<.>

La disposition de base est principalement affichée sur le terminal mobile, et est également applicable au terminal PC. Divisé en une colonne, deux colonnes, trois colonnes et quatre colonnes.

Deux méthodes sont utilisées ici.
Définissez d'abord le style de base :

/*==================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. Méthode de calcul traditionnelle : flottant + calcul précis de la largeur

       /*==============传统(浮动+清浮动+宽度精确计算) 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. calcul flexible méthode : 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=================*/

   Les deux méthodes obtiennent le même effet, comme indiqué ci-dessous :

   
   

---

Résumé

Si vous utilisez la première méthode, vous devez calculer avec précision la largeur des éléments et l'espacement des éléments. S'il y a un léger écart, la disposition sera perturbée.

Dans la deuxième méthode, il vous suffit de considérer la largeur de l'élément. Utilisez justifier-content: space-between pour obtenir l'effet de centrage dispersé.
Si vous souhaitez en savoir plus sur la mise en page flexible, veuillez vous référer à la documentation du master
Tutoriel Flex Layout : Grammaire http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Exemple de mise en page Flex
http://static.vgee.cn/static/index.html

Recommandations associées :

Trois introductions à la syntaxe de base CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!