DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> 不用bootstrap，只用CSS創建網格布局
不用bootstrap，只用CSS創建網格布局
編輯：CSS特效代碼     

本文譯自【http://j4n.co/blog/Creating-your-own-css-grid-system】，英語好的，可直接查看原網頁，不需要FQ。

翻譯拿不准的地方會有英文原文，方便大家理解。

一般的網格布局如下

grid-elements

可以看出主要有以下幾個部分

  • a container（容器）
  • rows（行）
  • columns（列）
  • gutters (the space between columns)（列邊距）

容器

container

容器的目的就是設置整個網格的寬度，通常設置為100%，但可能要給大屏顯示器設置一個最大寬度。

.grid-container {
        width : 100%;
        max-width : 1200px; 
    }

行

row

 

行是為了將列放在裡面，並防止其溢出到其他行中。為了實現這個目的，我們采用清楚浮動的hack技術來確保所有的內容都在行中。

  /*-- our cleafix hack -- */ 
    .row:before, 
    .row:after {
        content:"";
        display: table ;
         clear:both;
    }

列

column

 

毫無疑問，列是網格布局中最復雜的一部分。首先，在CSS當中，有好幾種不同的列的定位方式，而且還要考慮不同的寬度，比如響應式設計。在這裡我們將列設定位置，並給出寬度。下一部分再講響應式設計。

列定位

浮動，行內塊，塊級表格（display-table）,flex,有各種各樣的方法。從我個人經驗出發，最不容易出錯和使用最廣泛的就是float了。如果列是空的，將會漂浮在其他元素上面，為了防止這個，我們可以設定一個最小的寬度。

 [class*='col-'] {
        float: left;
        min-height: 1px; 
    }

列寬

為了確定一列的大小，我們可用容器的寬度來除以總的列數。在這裡，容器的寬度是100%，假設是6列，那麼一列就是100%/6=16.66%。

 [class*='col-'] {
        float: left;
        min-height: 1px; 
        width: 16.66%; 
    }

當然，這只是開始，如果我們想要其他的寬度，可以這樣設置：

.col-1{
        width: 16.66%; 
    }
    .col-2{
        width: 33.33%; 
    }
    .col-3{
        width: 50%; 
    }
    .col-4{
        width: 66.664%;
    }
    .col-5{
        width: 83.33%;
    }
    .col-6{
        width: 100%;
    }

我們唯一要注意的就是，不管你最終多少列，各列加起來不能超過容器的寬度。

列邊距

 

column-gutters

 

在'border-box' box-sizing模型出現之前，給一個百分比元素一個不可改變的寬度是一件很痛苦的事。幸運的是，用'border-box' box-sizing可以輕易的做到。

Before the 'border-box' box-sizing model, giving percentage-width elements a static padding was a real pain. Luckily, using the 'border-box' model, we can create gutters with ease.

/*-- setting border box on all elements inside the grid --*/
    .grid-container *{
        box-sizing: border-box; 
    }

    [class*='col-'] {
        float: left;
        min-height: 1px; 
        width: 16.66%; 
        /*-- our gutter --*/
        padding: 12px;
    }

(Personally, I use * {box-sizing: border-box;} in my CSS to apply border-box to everything on the page).

（這句不好翻譯，主要是還不理解box-sizing)

基本網格布局如下：

<div class="grid-container outline">
    <div class="row">
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
    </div> 
    <div class="row">
        <div class="col-2"><p>col-2</p></div> 
        <div class="col-2"><p>col-2</p></div> 
        <div class="col-2"><p>col-2</p></div> 
    </div> 
    <div class="row">
        <div class="col-3"><p>col-3</p></div> 
        <div class="col-3"><p>col-3</p></div> 
    </div> 
</div>

CSS

.grid-container{
        width: 100%; 
        max-width: 1200px;      
    }

    /*-- our cleafix hack -- */ 
    .row:before, 
    .row:after {
        content:"";
          display: table ;
        clear:both;
    }

    [class*='col-'] {
        float: left; 
        min-height: 1px; 
        width: 16.66%; 
        /*-- our gutter -- */
        padding: 12px; 
        background-color: #FFDCDC;
    }

    .col-1{ width: 16.66%; }
    .col-2{ width: 33.33%; }
    .col-3{ width: 50%;    }
    .col-4{ width: 66.66%; }
    .col-5{ width: 83.33%; }
    .col-6{ width: 100%;   }

    .outline, .outline *{
        outline: 1px solid #F6A1A1; 
    }

    /*-- some extra column content styling --*/
    [class*='col-'] > p {
     background-color: #FFC2C2; 
     padding: 0;
     margin: 0;
     text-align: center; 
     color: white; 
    }

HTML

    <div class="grid-container outline">
        <div class="row">
            <div class="col-1"><p>col-1</p></div> 
            <div class="col-1"><p>col-1</p></div> 
            <div class="col-1"><p>col-1</p></div> 
            <div class="col-1"><p>col-1</p></div> 
            <div class="col-1"><p>col-1</p></div> 
            <div class="col-1"><p>col-1</p></div> 
        </div> 
        <div class="row">
            <div class="col-2"><p>col-2</p></div> 
            <div class="col-2"><p>col-2</p></div> 
            <div class="col-2"><p>col-2</p></div> 
        </div> 
        <div class="row">
            <div class="col-3"><p>col-3</p></div> 
            <div class="col-3"><p>col-3</p></div> 
        </div> 
    </div>

<hr/>

 

制作網格布局

針對手機，調整我們的網格布局非常簡單，只需要調整列的寬度就夠了。為簡單起見，在屏幕小於800px時，將寬度增大一倍。要注意的就是當.col-2 ， .col-1，col-5在一行的時候，這時候我們將.col-2 ， .col-1占滿整行。

The only thing to watch out for is a few exceptions where the last column in the row hangs off the end. Such as in the case of the .col-2 columns and the.col-1 beside the .col-5 column. 
To counter this, we'll make the last .col-2 and .col-1 in the row 100% wide.

@media all and (max-width:800px){
        .col-1{ width: 33.33%;    }
        .col-2{ width: 50%;        }
        .col-3{ width: 83.33%;    }
        .col-4{ width: 100%;    }
        .col-5{ width: 100%;    }
        .col-6{ width: 100%;      }

        .row .col-2:last-of-type{
            width: 100%; 
        }

        .row .col-5 ~ .col-1{
            width: 100%; 
        }
    }

如果屏幕更小，我們繼續調整。

 @media all and (max-width:650px){
        .col-1{ width: 50%;        }
        .col-2{ width: 100%;    }
        .col-3{ width: 100%;    }
        .col-4{ width: 100%;    }
        .col-5{ width: 100%;    }
        .col-6{ width: 100%;      }
    }

到這裡，我們就創建害了我們的響應式布局：

<div class="grid-container outline">
    <div class="row">
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
    </div> 
    <div class="row">
        <div class="col-2"><p>col-2</p></div> 
        <div class="col-2"><p>col-2</p></div> 
        <div class="col-2"><p>col-2</p></div> 
    </div> 
    <div class="row">
        <div class="col-3"><p>col-3</p></div> 
        <div class="col-3"><p>col-3</p></div> 
    </div> 
    <div class="row">
        <div class="col-4"><p>col-4</p></div> 
        <div class="col-2"><p>col-2</p></div> 
    </div> 
    <div class="row">
        <div class="col-5"><p>col-5</p></div> 
        <div class="col-1"><p>col-1</p></div> 
    </div> 
    <div class="row">
        <div class="col-6"><p>col-6</p></div> 
    </div> 
</div>

要提醒的是這只是創建網格布局的開始，這還算不上是一個框架或完美的解決方法，但至少讓我們覺得采用CSS創建網格布局的過程並不神秘。

CSS特效代碼
CSS3 變形小結
?旋轉 rotate() （正-順 負-逆） ?扭曲 skew()?縮放scale()?位移tra
Css <ul><li>列表的樣式的控制
列表是HTML裡一種很有用的顯示方式，可以把相關的並列內容整齊地垂直排列，使網頁顯得整潔專業，並讓浏
web前端開發之編寫高質量代碼
Web標准--結構、樣式和行為的分離Web標准可分為三個部分：結構標准、樣式標准、行為標准。結構標准

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
CSS 高級布局技巧 CSS選擇器的優先級 css3寬度大於或小於@media max-width min-width border-radius給元素加圓角邊框 過長文字自動換行的技巧 Word-Break Word-Wrap CSS3鼠標懸停360度旋轉效果 CSS內聯樣式 CSS3 使用自定義字體 IE6-9版本浏覽器css hack的if 語句操作代碼 css樣式覆蓋順序
熱門推薦
原來css中的border還可以這樣玩 css圖片水平和垂直翻轉 css3圓形頭像（當圖片寬高不相等時） CSS 入門知識 css 居中 CSS善用繼承inherit border-radius給元素加圓角邊框 深入理解CSS裁剪clip CSS 設計徹底研究（三）深入理解盒子模型
大家都在看
企業管理平台開發項目(開源)功能模塊 dll 基准源代碼 淺談JS事件冒泡 原生JavaScript實現瀑布流布局 網站廣告圖設計:產品照片和廣告文案的排版 在一個js文件裡遠程調用jquery.js會在ie8下的一個奇怪問題 再談Jquery Ajax方法傳遞到action(補充) jquery元素插入、刪除、清空 js字符串轉數組
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved