css設(shè)置多列等高布局的方法示例
我要評論初始時，多個列內(nèi)容大小不同，高度不同?，F(xiàn)在需要設(shè)置不同的背景來顯示，而且各個列的高度需要保持一致。那么這就需要利用到多列等高布局。
最終需要的效果：
1. 真實等高布局
flex 技術(shù)點：彈性盒子布局flex，默認(rèn)值就是自帶等高布局的特點。
定義flex布局的時候，有一些默認(rèn)值。
flex-direction 屬性定義主軸的方向。默認(rèn)值為 row ，一般是水平顯示。flex容器的主軸被定義為與文本方向相同。 主軸起點和主軸終點與內(nèi)容方向相同。
align-item 屬性定義flex子項在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對齊方式。默認(rèn)值為 stretch ，元素被拉伸以適應(yīng)容器。
<div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>
css
.box {
display: flex;
}
.left {
width: 300px;
background-color: grey;
}
.center {
flex: 1;
background: red;
}
.right {
width: 500px;
background: yellow;
}
See the Pen equal-hight-layout-flex by weiqinl ( @weiqinl ) on CodePen .
2. 真實等高布局
table-cell 技術(shù)點：table布局天然就具有等高的特性。
display設(shè)置為 table-cell ，則此元素會作為一個表格單元格顯示。類似于使用標(biāo)簽 <td> 或者 <th> 。
HTML結(jié)構(gòu)
<div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>
CSS樣式
.left {
display: table-cell;
width:30%;
background-color: greenyellow;
}
.center {
display: table-cell;
width:30%;
background-color: gray;
}
.right {
display: table-cell;
width:30%;
background-color: yellowgreen;
}
3. 假等高列布局 內(nèi)外邊距底部正負(fù)值
實現(xiàn)：設(shè)置父容器的overflow屬性為hidden。給每列設(shè)置比較大的底內(nèi)邊距，然后用數(shù)值相似的負(fù)外邊距消除這個高度。
- 不考慮可擴展性，只需要將padding-bottom/margin-bottom ，設(shè)置為最高列與最低列相差高度值，就可以得到等高效果。
- 考慮擴展性，為了防止將來可能某列高度大量的增加或減少，所有，我們設(shè)置了一個比較大的值。
技術(shù)點
- background 會填充內(nèi)邊距 padding，而不會填充外邊距 margin 。margin具有坍塌性，可以設(shè)置負(fù)值。
- float:left。使用float，元素會脫離文檔流，使其浮動至最近的文檔流元素。在這里的作用是，將三個div元素并排。
- overflow:hidden; 設(shè)置overflow屬性為hidden，同時會產(chǎn)生 塊級格式化上下文(BFC)，消除float帶來的影響。同時，根據(jù)需要，會截取內(nèi)容以適應(yīng)填充框，將超出容器的部分隱藏。
HTML結(jié)構(gòu)
<div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>
CSS
.box {
overflow: hidden;
}
.box > div{
/**
* padding-bottom 設(shè)置比較大的正值。
* margin-bottom 設(shè)置絕對值大的負(fù)值。
**/
padding-bottom: 10000px;
margin-bottom: -10000px;
float:left;
width:30%;
}
.left {
background-color: greenyellow;
}
.center {
background-color: gray;
}
.right {
background-color: yellowgreen;
}
4. 假等高布局，背景視覺效果
技術(shù)點： float浮動，并設(shè)置每一列的寬度。設(shè)置父元素為行內(nèi)塊級元素，之后再利用線性漸變的圖片來設(shè)置父元素的背景凸顯等高的效果
CSS linear-gradient 函數(shù)用于創(chuàng)建一個表示兩種或多種顏色線性漸變的圖片。
display: inline-block ，設(shè)置為行內(nèi)塊級元素。
<div class="box five-columns">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
css
/** 需要自己算出平均每列的寬度 */
.box {
display: inline-block;
background: linear-gradient(
to right,
red,
red 20%,
blue 20%,
blue 40%,
yellow 40%,
yellow 60%,
orange 60%,
orange 80%,
grey 80%,
grey);
}
.col {
float: left;
width: 16%;
padding: 2%;
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
前端應(yīng)該掌握的CSS實現(xiàn)多列等高布局技巧
我們在寫頁面的時候，有的時候會遇到多欄布局，這篇文章主要介紹了前端應(yīng)該掌握的CSS實現(xiàn)多列等高布局技巧，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟2018-06-05利用CSS3的flexbox實現(xiàn)水平垂直居中與三列等高布局
這篇文章給大家介紹了三個小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實現(xiàn)水平垂直居中對齊和三列等高自適應(yīng)頁腳區(qū)域黏附底部的布局，有需要的可以參考2016-09-12- 下面小編就為大家?guī)硪黄獪\析CSS等高布局的6種方式。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-04
用CSS實現(xiàn)三列DIV等高布局以傳達(dá)更好的視覺效果
頁面布局中經(jīng)常遇到等高布局的情況，為了得到更好的視覺效果，就要實現(xiàn)DIV等高布局的效果。以最普遍的DIV三列布局來說2014-09-03- 這種情況下就需要兩列的高度保持一致了，左邊高度增加，右邊也跟著增加，右邊高度增加，左邊同樣也要增加，否則就會出現(xiàn)“斷層”的效果,接下來將介紹多列等高的實現(xiàn)方法，2012-12-03
- CSS網(wǎng)頁布局實例:三欄等高布局.2009-08-29
CSS實例：CSS實現(xiàn)的等高網(wǎng)頁布局
網(wǎng)頁制作Webjx文章簡介：為了讓網(wǎng)頁更美觀、協(xié)調(diào)，有的時候需要用到左右等到布局，傳統(tǒng)的等高布局是用 javascript 實現(xiàn)的，現(xiàn)在來看看 silence 發(fā)明的真正的 CSS 實現(xiàn)的等2009-04-02CSS實例:三列等高布局-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
三列等高CSS布局的一個實例， 修改國外的一個demo， 兼容到了IE5.5 和標(biāo)準(zhǔn)的瀏覽器OperaFirefoxSafari。 不過hack太多，不是很喜歡這樣做。 全部代碼如下2008-10-17
本文講的等高布局是在不手動設(shè)置元素高度的情況下，使用純css實現(xiàn)各個元素高度都相當(dāng)?shù)男Ч【幱X得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看2019-01-09
