CSS的經典三欄布局如何?

來源:互聯網
上載者:User
這次給大家帶來CSS的經典三欄布局如何?,實現CSS的經典三欄布局的注意事項有哪些,下面就是實戰案例,一起來看一下。

本文介紹了CSS經典三欄布局方案,分享給大家,也給自己做個筆記,具體如下:

三欄布局,顧名思義就是兩邊固定,中間自適應。三欄布局在開發十分常見

1. float布局

最簡單的三欄布局就是利用float進行布局。首先來繪製左、右欄:

<style>  .left {    float: left;    width: 100px;    height: 200px;    background-color: red;  }   .right {    float: right;    width: 100px;    height: 200px;    background-color: yellow;  }</style>     <div class="container">    <div class="left"></div>    <div class="right"></div>    <div class="main"></div>  </div>

接下來再來看中間欄如何處理。我們知道對於float元素,其會脫離文檔流,其他盒子也會無視這個元素。(但其他盒子內的文本依然會為這個元素讓出位置,環繞在周圍。)所以此時只需在container容器內添加一個正常的div,其會無視left和right,撐滿整個container,只需再加上margin為left right流出空間即可:

<style>   .left {     float: left;     width: 100px;     height: 200px;     background-color: red;   }     .right {     float: right;     width: 100px;     height: 200px;     background-color: yellow;   }     .main {     background-color: green;     height: 200px;     margin-left: 120px;     margin-right: 120px;   }     .container {     border: 1px solid black;   }     <div class="container">   <div class="left"></div>   <div class="right"></div>   <div class="main"></div>   </div>

優勢:簡單

劣勢:中間部分最後載入,內容較多時影響體驗

2. BFC 規則

BFC(塊格式化上下文)規則規定:BFC不會和浮動元素重疊。所以如果將main元素設定為BFC元素即可:

<style>  .left {    float: left;    width: 100px;    height: 200px;    background-color: red;  }   .right {    float: right;    width: 100px;    height: 200px;    background-color: yellow;  }   .main {    background-color: green;    height: 200px;    overflow: hidden;  }   <div class="container">    <div class="left"></div>    <div class="right"></div>    <div class="main"></div>  </div>

3. 聖杯布局

聖杯布局的核心是左、中、右三欄都通過float進行浮動,然後通過負值margin進行調整。

第一步,先來看下基本布局

<style>    .left {        float: left;        width: 100px;        height: 200px;        background-color: red;    }     .right {        float: left;        width: 100px;        height: 200px;        background-color: yellow;    }     .main {        float: left;        width: 100%;        height: 200px;        background-color: blue;    }</style><body>    <div class="container">        <div class="main"></div>        <div class="left"></div>        <div class="right"></div>    </div></body>

此時看到的效果是:左、右兩欄被擠到第二行。這是因為main的寬度為100%。接下來我們通過調整左、右兩欄的margin來將左、中、右放在一行中:

.left {    float: left;    width: 100px;    height: 200px;    margin-left: -100%;    background-color: red;} .right {    float: left;    width: 100px;    height: 200px;    margin-left: -100px;    background-color: yellow;}

第二步,將left的margin-left設定為-100%,此時左欄會移動到第一行的首部。然後再將right的margin-left設定為其寬度的負值:-100px,則右欄也會移動到和左、中欄一行中:

不過此時還沒有大功告成,我們試著在main中加入一些文字:

<body>    <div class="container">        <div class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</div>        <div class="left"></div>        <div class="right"></div>    </div></body>

可以看到文字被壓住了,接下來就要解決這個問題。

第三步,給container一個padding,該padding應該正好等於左、右欄的寬度:

.container {    padding-left: 100px;    padding-right: 100px;}

此時看到的結果是左、中、右三欄都整體收縮了,但文字依然被壓住了。

第四步,給左、右兩欄加上相對布局,然後再通過設定left和right值向外移動:

.left {    float: left;    width: 100px;    height: 200px;    margin-left: -100%;    position: relative;    left: -100px;    background-color: red;} .right {    float: left;    width: 100px;    height: 200px;    margin-left: -100px;    position: relative;    right: -100px;    background-color: yellow;}

到此為止,大功告成:

相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

html5怎樣做出圖片轉圈的動畫效果

在h5裏手機端頁面縮放應該如何?

怎樣用H5 Canvas實現3D動態Chart圖表

H5的FileReader分布讀取檔案應該如何使用以及其方法簡介

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.