HTML三欄布局的實現方式有哪些

本文小編為大家詳細介紹“HTML三欄布局的實現方式有哪些”，內容詳細，步驟清晰，細節處理妥當，希望這篇“HTML三欄布局的實現方式有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

要達到的效果是三欄布局,兩端寬度200px;固定不變,中間寬度自適應.

圣杯布局.

利用浮動和相對定位實現.

html代碼

<div class="container">

    <div class="middle">

        圣杯布局中

    </div>

    <div class="left">

        圣杯布局左

    </div>

    <div class="right">

        圣杯布局右

    </div>

</div>

css代碼

.left,

.middle,

.right{ 

    position: relative;

    float: left;

}

.container{

    padding:0 200px 0 200px;

    overflow: hidden;

}

.container div{

    height: 100px;

}

.left,.right{

    width: 200px;

    background: red;

}

.left{

    margin-left: -100%;

    left: -200px;

}

.right{

    margin-left: -200px;

    right: -200px;

}

.middle{ 

    width: 100%;

    background: blue;

}

雙飛翼布局

同圣杯布局差不多,只不過在實現中間部分自適應的方式有所區別,這種方式多嵌套了一個div.

html代碼

<div class="center">

    <div class="center-inner">

        雙飛翼布局 中

    </div>

</div>

<div class="left">

    雙飛翼布局 左

</div>

<div class="right">

    雙飛翼布局 右

</div>

css代碼

.left,

.center,

.right {

    float: left;

    height: 100px;

}

.left {

    margin-left: -100%;

    width: 200px;

    background: red;

}

.right {

    margin-left: -200px;

    width: 200px;

    background: red;

}

.center {

    width: 100%;

    background: green;

}

.center-inner {

    margin-left: 200px;

    margin-right: 200px;

}

上述布局方式都是采用的傳統的css標準實現,下面介紹三種其他的實現的方式(flex,grid,calc()).

flex

利用flex的元素屬性實現.元素屬性的flex是一個復合屬性.flex:flex-grow | flex-shrink | flex-basis;分別為:空間充足放大比,空間不足縮小比以及計算剩余空間之前的寬度值.

可參考阮一峰的文章:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

html代碼

<div class="flex">

<div class="l"></div>

<div class="c"></div>

<div class="r"></div>

</div>

css代碼

.flex{

    display: flex;

}

.flex div{

    height: 50px;

}

.l,.r{

    background-color: yellow;

    flex:0 0 200px;

}

.c{

    flex:1;

    background-color: red;

}

grid

grid是微軟提出的網頁布局解決方案,最新的Safari，Chrome，Firefox都已經進行了支持.個人感覺grid布局比flex布局更強大一些,寬度高度兩個方向上都可以得到控制.grid也更容易理解.

html代碼

<div class="grid">

<div class="l"></div>

<div class="c"></div>

<div class="r"></div>

</div>

css代碼

.grid{

    display: grid;

    grid-template-columns: 200px auto 200px;

    grid-template-rows:100px

}

.l,.r{

    background-color: red;

}

.c{

    background-color: pink;

}

css3的calc()函數

css3提供的calc()函數能夠實現給寬高等設置動態的值.支持 + - * / 四則運算.注意運算符兩邊要個留一個空格.否則設置無效.

同樣需要設置浮動將三個元素并排顯示.如果不想設置浮動的話,可將單個內部div設置為inline-block;同時,為了取消換行帶來的html顯示間隙.需將最外層盒子的字體設置為0,即 .calc{font-size:0}.

html代碼

<div class="calc">

<div class="l"></div>

<div class="c"></div>

<div class="r"></div>

</div>

css代碼

.calc div{

    float: left;

    height: 50px;

}

.l,.r{

    width:200px;

    background-color: red;

}

.c{

    width:calc(100% - 400px);

    background-color: green;

}

讀到這里，這篇“HTML三欄布局的實現方式有哪些”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。