css基礎多欄布局

NoraXie 發布于2019-08-29 15:10 / 3129人閱讀

摘要：前端布局基礎布局，主要展現在移動端，端同樣適用。分為一欄兩欄三欄四欄。這里使用了兩種方式實現。使用方式二，只需要考慮元素寬度即可，使用就可以實現分散居中的效果。

前端布局

基礎布局，主要展現在移動端，pc端同樣適用。分為一欄、兩欄、三欄、四欄。
這里使用了兩種方式實現。
首先設置基礎樣式：

/*==================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================*/
    
    
        入選CCTV中國年度品牌
        獲得Hair代理權
        簽署5G篩查合作協議
        全國開設近20家分院
    
    
    
    
        入選CCTV中國年度品牌
        獲得Hair代理權
        簽署5G篩查合作協議
        全國開設近20家分院
    
    
    
    
        入選CCTV中國
        獲得Hair代理權
        簽署5G篩查合作協議
        全國開設近20家
        了解植發需求
         推薦專業醫師
    
    
    
    
        咨詢
        定位
        檢測
        定制
        輔助
        養護
        咨詢
        定制
    
/*==================html end================*/

傳統計算方式：浮動+寬度精確計算

    /*==============傳統(浮動+清浮動+寬度精確計算) 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=================*/

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

兩種方式實現的效果一樣，如下圖：

總結

使用方式一的話，需要精確計算元素的寬度和元素的間隔，稍微有點偏差，布局就會被打亂。
使用方式二，只需要考慮元素寬度即可，使用justify-content: space-between;就可以實現分散居中的效果。
如果想了解更多flex布局，參考大神的文檔吧
Flex 布局教程：語法篇 http://www.ruanyifeng.com/blo...
Flex 布局示例 http://static.vgee.cn/static/...

云服務器 GPU云服務器 css布局 css布局教程學習css布局 css基礎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/113140.html

H5多列布局

摘要：多列布局基本概念多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局字體顏色背景和其它效果實現更加精確的控制。多列布局基本概念 1、多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數量 /*列數*/ -webkit-column-count: 3; /*分割線*/ -webkit...

Jingbin_ 2019-08-29 16:15 評論0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局字體顏色背景和其它效果實現更加精確的控制。多列布局基本概念 1、多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數量 /*列數*/ -webkit-column-count: 3; /*分割線*/ -webkit...

mayaohua 2019-08-02 11:08 評論0 收藏0
CSS3魔法堂：說說Multi-column Layout

摘要：注意會生成新的，因此不會出現效果。圖中藍色線框，位于內，作為間的分隔線。不可否認求學之路的艱辛苦悶。如此的努力，為了僅僅是能在大學逍遙快活一番這動機實在讓人心寒，也正因如此造就了大學生的墮落。人類文明進步最有力的證明。前言 ?是否記得《讀者文摘》中那一篇篇優美感人的文章呢？那除了文章內容外，還記得那報刊、雜志獨有的多欄布局嗎？?當我們希望將報刊、雜志中的閱讀體驗遷移到網頁上時，最簡單...

gitmilk 2019-08-30 12:58 評論0 收藏0
[譯]148個資源讓你成為CSS專家

摘要：層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關于基礎特性，一份關于布局。核心第一篇一份來自的基礎參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎指南，包含使用的好處介紹個方法快速寫成高質量的寫出高效的一些提示。迄今為止，我已經收集了100多個精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設計脫穎而出。 CSS3 資源 20個學習CSS3的有用資源 C...

impig33 2019-08-29 11:10 評論0 收藏0
結合CSS3的布局新特征談談常見布局方法

摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。寫在前面最近看到《圖解CSS3》的布局部分，結合自己以前閱讀過的一些布局方面的知識，這里進行一次基于CSS2、3的各種布局的方法總結。常見的頁面布局在拿到設計稿時，作為一個前端人員，我們首先會做的應該是為設計圖大致地劃分區域，然后選擇一...

xuhong 2019-08-28 18:31 評論0 收藏0