CSS三欄布局怎么弄

這篇文章給大家分享的是有關(guān)CSS三欄布局怎么弄的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

對于前端來說，布局也是必須掌握的，一個好的布局可以讓頁面看起來更美觀。提到布局，那就不得不說CSS三欄布局。這是前端面試經(jīng)常會問到的一個問題，算是基礎(chǔ)題。所謂的三欄布局，一般是指左右兩邊固定中間自適應(yīng)，或者是中間固定左右兩邊自適應(yīng)。

左右兩邊固定中間自適應(yīng)

圣杯布局

HTML結(jié)構(gòu)設(shè)置

新建一個父元素，包含三個子元素：left、main、right（注意，main在寫在前面，這樣在頁面渲染時會先加載中間，針對面試題優(yōu)先加載中間部分）

style樣式設(shè)置

1、父元素設(shè)置高度
 2、三個元素均設(shè)置浮動
 3、中間main部分定寬100%：width: 100%，左右兩邊按產(chǎn)品需求設(shè)置寬高
 4、左邊設(shè)置margin-left: -100%；右邊設(shè)置margin-right: -右盒子寬
 5、父元素設(shè)置padding-left: 左盒子寬；padding-right: 右盒子寬
 6、左右盒子相對定位

<div class="container">
  <div class="main f">go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
  <div class="left f"></div>
  <div class="right f"></div>
</div>
<style>
  body {
    min-width: 700px;
  }
  .container {
     height: 300px;
     padding: 0 200px 0 200px;
  }
  .f {
     float: left;
  }
  .main {
     width: 100%;
     height: 300px;
     background-color: cornflowerblue;
  }
  .left {
     width: 200px;
     height: 300px;
     background-color: indianred;
     margin-left: -100%;
     position: relative;
     left: -200px;
  }
  .right {
     width: 200px;
     height: 300px;
     background-color: lightgreen;
     margin-left: -200px;
     position: relative;
     right: -200px;
  }
</style>

該布局受內(nèi)部元素影響而破壞布局的概率低，但是當(dāng)瀏覽器屏幕縮小的一定程度時，左右兩側(cè)的內(nèi)容會掉下來，或發(fā)生重疊現(xiàn)象。解決方案，給body加一個最小寬度（起碼大于左右兩側(cè)寬度之和）

雙飛翼布局

與圣杯布局的思路是一致的，只是有一些細(xì)微的差別。

HTML結(jié)構(gòu)設(shè)置

新建一個父元素，包含三個子元素：left、main、right（注意，main在寫在前面，這樣在頁面渲染時會先加載中間，針對面試題優(yōu)先加載中間部分）

style樣式設(shè)置

1、父元素設(shè)置高度
 2、三個元素均設(shè)置浮動
 3、中間main部分定寬100%：width: 100%，左右兩邊按產(chǎn)品需求設(shè)置寬高
 4、中間main部分再加一個盒子inner，放置內(nèi)容（與圣杯布局的不同點(diǎn)）
 5、左邊設(shè)置margin-left: -100%；右邊設(shè)置margin-right: -右盒子寬
 6、新添加盒子，inner，設(shè)置左右padding或margin

<div class="container">
   <div class="main f">
      <div class=inner>go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
   </div>
   <div class="left f"></div>
   <div class="right f"></div>
</div>
<style>
  .container {
     height: 300px;
  }
  .f {
     float: left;
  }
  .main {
     width: 100%;
     height: 300px;
     background-color: cornflowerblue;
  }
  .left {
     width: 200px;
     height: 300px;
     background-color: indianred;
     margin-left: -100%;
  }
  .right {
     width: 200px;
     height: 300px;
     background-color: lightgreen;
     margin-left: -200px;
  }
  .inner {
    padding: 0 200px 0 200px;
  }
</style>

自身浮動

HTML結(jié)構(gòu)設(shè)置

新建三個元素：left、right、main（注意，main寫在后面）

style樣式設(shè)置

1、左盒子左浮動，右盒子右浮動
 2、中間部分設(shè)置margin或padding值

<div class="left"></div>
<div class="right"></div>
<div class="main">我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容</div>
<style>
    .main {
        margin: 0 200px 0 200px;
        background-color: red;
        height: 200px;
    }
    .left {
        float: left;
        width: 200px;
        background-color: blue;
        height: 200px;
    }
    .right {
        float: right;
        width: 200px;
        background-color: pink;
        height: 200px;
    }
</style>

CSS3新特性：flex

HTML結(jié)構(gòu)設(shè)置

新建一個父元素，包含三個子元素：left、main、right（注意，main寫在中間）

style樣式設(shè)置

1、父元素設(shè)置寬度為100%，display: flex；
 2、左右兩則按產(chǎn)品需求設(shè)置寬高
 3、中間部分設(shè)置flex: 1；

<div class="container">
  <div class="left"></div>
  <div class="main">我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容</div>
  <div class="right"></div>
</div>
<style>
    .container {
       width: 100%;
       height: 200px;
       display: flex;
   }
   .main {
       flex: 1;
       background-color: red;
       height: 200px;
   }
   .left {
       width: 200px;
       background-color: blue;
       height: 200px;
   }
   .right {
       width: 200px;
       background-color: pink;
       height: 200px;
   }
</style>

還有其他的寫法，這里就不一一贅述，只是列舉了一些比較常用的，以及面試可能會問到的情況。CSS3還有很多好玩的特性，在工作和學(xué)習(xí)的過程中值得深入研究。

中間固定左右兩邊自適應(yīng)

浮動 + 負(fù)邊距 （圣杯布局）

HTML結(jié)構(gòu)設(shè)置

新建一個父元素，包含三個子元素：left、main、right（注意，main寫在中間）

style樣式設(shè)置

1、左右兩邊各占50%的寬度
 2、左邊負(fù)邊距 margin-left 占中間p寬度的一半
 3、右邊負(fù)邊距 margin-right 也占中間p寬度的一半

 <div class="container">
   <div class="left"></div>
   <div class="main">我是中間內(nèi)容</div>
   <div class="right"></div>
 </div>
 <style>
    .main {
        width: 100px;
        text-align: center;
        float: left;
        background-color: lightgreen;
        height: 300px;
    }
    .left {
        height: 300px;
        float: left;
        width: 50%;
        margin-left: -50px;
        background-color: pink;
    }
    .right {
        height: 300px;
        float: right;
        width: 50%;
        margin-right: -50px;
        background-color: cornflowerblue;
    }
 </style>

CSS3新特性：flex

HTML結(jié)構(gòu)設(shè)置

新建一個父元素，包含三個子元素：left、main、right

style樣式設(shè)置

1、父元素設(shè)置display: flex；flex-direction: row；
 2、左右設(shè)置flex-grow: 1，平分剩余空間

 <div class="container">
   <div class="left"></div>
   <div class="main">我是中間內(nèi)容</div>
   <div class="right"></div>
 </div>
 <style>
    .container {
        display: flex;
        flex-direction : row;
    }
    .main {
        width: 200px;
        height: 300px;
        text-align: center;
        background-color: lightgreen;
    }
    .left {
        height: 300px;
        flex-grow: 1;
        background-color: pink;
    }
    .right {
        height: 300px;
        flex-grow: 1;
        background-color: cornflowerblue;
    }
 </style>

CSS3特性 calc(四則運(yùn)算)

用于動態(tài)計算長度值。需要注意的是，運(yùn)算符前后都需要保留一個空格，例如：width: calc(100% - 50px)。

HTML結(jié)構(gòu)設(shè)置

新建一個父元素，包含三個子元素：left、main、right

style樣式設(shè)置

1、父元素設(shè)置100%寬；
 2、左右設(shè)置width: calc(50%, - 中間寬/2)

 <div class="container">
   <div class="left"></div>
   <div class="main">我是中間內(nèi)容</div>
   <div class="right"></div>
 </div>
 .container {
     width: 100%;
     height: 300px;
 }
 .f {
     float: left;
 }
 .main {
     width: 100px;
     text-align: center;
     background-color: lightgreen;
     height: 300px;
 }
 .left {
     height: 300px;
     background-color: pink;
     width: calc(50% - 50px);  /*平分中間部分的寬度*/
 }
 .right {
     height: 300px;
     background-color: cornflowerblue;
     width: calc(50% - 50px);  /*平分中間部分的寬度*/
 }

感謝各位的閱讀！關(guān)于CSS三欄布局怎么弄就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！