이 글에서는 CSS의 기본 다중 열 레이아웃을 주로 소개합니다. 이제는 모든 사람과 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

프런트 엔드 레이아웃

기본 레이아웃, 주로 표시됩니다. 모바일 단말기에서도 PC 버전에도 동일하게 적용됩니다. 1열, 2열, 3열, 4열로 나누어집니다.
여기에서는 두 가지 방법이 사용됩니다.
먼저 기본 스타일 설정:

/*==================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. 기존 계산 방법: float + 너비 정밀 계산

       /*==============传统(浮动+清浮动+宽度精确计算) 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 계산 방법: 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=================*/

   로그인 후 복사

   두 가지 방법은 아래와 같이 동일한 효과를 얻습니다.
   

   ---

   요약

   1번 방법을 사용할 경우 요소의 너비와 요소의 간격을 정확하게 계산해야 합니다. 약간의 편차가 있으면 레이아웃이 깨집니다.
   사용 방법 2, 요소의 너비만 고려하고 분산 및 중앙 집중 효과를 얻으려면 justify-content: space-between을 사용하면 됩니다.
   Flex 레이아웃에 대해 더 알고 싶다면 마스터 문서를 참조하세요
   Flex 레이아웃 튜토리얼: Grammar http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
   Flex 레이아웃 예시http :/ /static.vgee.cn/static/index.html

   관련 권장 사항:

   CSS 기본 구문 - CSS를 도입하는 3가지 방법

   위 내용은 CSS 기본 다중 열 레이아웃의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!