css多種方式實(shí)現(xiàn)等高布局的示例代碼
發(fā)布時(shí)間：2019-01-09 16:37:21 作者：heath_learning 
我要評(píng)論
我要評(píng)論本文講的等高布局是在不手動(dòng)設(shè)置元素高度的情況下，使用純css實(shí)現(xiàn)各個(gè)元素高度都相當(dāng)?shù)男Ч?，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文講的等高布局是在不手動(dòng)設(shè)置元素高度的情況下，使用純css實(shí)現(xiàn)各個(gè)元素高度都相當(dāng)?shù)男ЧＨ鐖D：
1、使用table-cell實(shí)現(xiàn)(兼容IE8)
<style>
body,div,ul,li{margin: 0;padding: 0;}
li{list-style: none;}
.table-layout-container{
width: 50%;
margin: 20px auto;
}
.table-row-layout{
/* 當(dāng)元素display設(shè)置為table-row后，再設(shè)置寬度就沒(méi)有效果了，因此需要再包裹一層div，然后給它設(shè)置寬度 */
display: table-row;
}
.table-cell-layout{
display: table-cell;
width: 33.33%;
padding: 10px;
border: 1px solid #ccc;
border-left: none;
}
.table-cell-layout:first-child{
border-left: 1px solid #ccc;
}
</style>
<body>
<div class="table-layout-container">
<ul class="table-row-layout">
<li class="table-cell-layout">
行業(yè)的發(fā)展必然帶來(lái)職業(yè)的細(xì)分，在前端領(lǐng)域也一樣，目前行業(yè)前端有下面這幾個(gè)方向：界面展現(xiàn)用戶(hù)體驗(yàn)和可訪(fǎng)問(wèn)性方向、
后的js/nodejs開(kāi)發(fā)方向、audio/video音視頻富媒體方向、SVG/canvas/webGL動(dòng)效創(chuàng)意表現(xiàn)與數(shù)據(jù)可視化方向、工具建設(shè)
文檔管理內(nèi)部站建設(shè)的前端運(yùn)維方向以及會(huì)議預(yù)定團(tuán)建組織對(duì)外品牌宣傳的前端運(yùn)營(yíng)方向。
</li>
<li class="table-cell-layout">
由于每個(gè)人的性格特質(zhì)，成長(zhǎng)經(jīng)歷的差異，自然適合的方向也不一樣。感性細(xì)膩有設(shè)計(jì)背景可以專(zhuān)注于用戶(hù)體驗(yàn)，純邏輯工程
化思維濃郁則更適合偏后開(kāi)發(fā)，數(shù)學(xué)物理強(qiáng)悍可以考慮數(shù)據(jù)可視化方向，溝通協(xié)調(diào)能力很強(qiáng)可以朝著前端運(yùn)營(yíng)方向努力。
</li>
<li class="table-cell-layout">
在學(xué)生時(shí)代，大家都很純粹，我喜歡這個(gè)就學(xué)這個(gè)，例如，很多女生很喜歡CSS，寫(xiě)頁(yè)面，做效果。但是，等她開(kāi)始找工作，
還是接觸真實(shí)的行業(yè)圈子的時(shí)候，事情就發(fā)生了變化。
</li>
</ul>
</div>
</body>
2、使用flex布局實(shí)現(xiàn)
<style>
body,div,ul,li{margin: 0;padding: 0;}
li{list-style: none;}
.flex-layout{
display: flex;
width: 50%;
margin: 20px auto;
}
.flex-item{
width: 33.33%;
padding: 10px;
border: 1px solid #ccc;
border-left: none;
}
.flex-item:first-child{
border-left: 1px solid #ccc;
}
</style>
<body>
<ul class="flex-layout">
<li class="flex-item">
行業(yè)的發(fā)展必然帶來(lái)職業(yè)的細(xì)分，在前端領(lǐng)域也一樣，目前行業(yè)前端有下面這幾個(gè)方向：界面展現(xiàn)用戶(hù)體驗(yàn)和可訪(fǎng)問(wèn)性方向、偏后
的js/nodejs開(kāi)發(fā)方向、audio/video音視頻富媒體方向、SVG/canvas/webGL動(dòng)效創(chuàng)意表現(xiàn)與數(shù)據(jù)可視化方向、工具建設(shè)文檔管理內(nèi)部站建設(shè)的
前端運(yùn)維方向以及會(huì)議預(yù)定團(tuán)建組織對(duì)外品牌宣傳的前端運(yùn)營(yíng)方向。
</li>
<li class="flex-item">
由于每個(gè)人的性格特質(zhì)，成長(zhǎng)經(jīng)歷的差異，自然適合的方向也不一樣。感性細(xì)膩有設(shè)計(jì)背景可以專(zhuān)注于用戶(hù)體驗(yàn)，純邏輯工程化思
維濃郁則更適合偏后開(kāi)發(fā)，數(shù)學(xué)物理強(qiáng)悍可以考慮數(shù)據(jù)可視化方向，溝通協(xié)調(diào)能力很強(qiáng)可以朝著前端運(yùn)營(yíng)方向努力。
</li>
<li class="flex-item">
在學(xué)生時(shí)代，大家都很純粹，我喜歡這個(gè)就學(xué)這個(gè)，例如，很多女生很喜歡CSS，寫(xiě)頁(yè)面，做效果。但是，等她開(kāi)始找工作，還是接
觸真實(shí)的行業(yè)圈子的時(shí)候，事情就發(fā)生了變化。
</li>
</ul>
</body>
3、利用margin實(shí)現(xiàn)等高布局(實(shí)際開(kāi)發(fā)中不建議使用)
實(shí)現(xiàn)上面的等高布局除了可以使用table-cell、flex布局外還可以利用margin負(fù)值來(lái)實(shí)現(xiàn)
<style>
body,div,ul,li{margin: 0;padding: 0;}
li{list-style: none;}
.marign-layout{
width: 50%;
margin: 20px auto;
overflow: hidden;
}
.item{
float: left;
width: 30%;
padding: 10px;
margin-bottom: -9999px;
padding-bottom: 9999px;
border: 1px solid #ccc;
border-left: none;
}
.item:first-child{
border-left: 1px solid #ccc;
}
</style>
<body>
<ul class="marign-layout">
<li class="item">
行業(yè)的發(fā)展必然帶來(lái)職業(yè)的細(xì)分，在前端領(lǐng)域也一樣，目前行業(yè)前端有下面這幾個(gè)方向：界面展現(xiàn)用戶(hù)體驗(yàn)和可訪(fǎng)問(wèn)性方向、偏后
的js/nodejs開(kāi)發(fā)方向、audio/video音視頻富媒體方向、SVG/canvas/webGL動(dòng)效創(chuàng)意表現(xiàn)與數(shù)據(jù)可視化方向、工具建設(shè)文檔管理內(nèi)部站建設(shè)的
前端運(yùn)維方向以及會(huì)議預(yù)定團(tuán)建組織對(duì)外品牌宣傳的前端運(yùn)營(yíng)方向。
</li>
<li class="item">
由于每個(gè)人的性格特質(zhì)，成長(zhǎng)經(jīng)歷的差異，自然適合的方向也不一樣。感性細(xì)膩有設(shè)計(jì)背景可以專(zhuān)注于用戶(hù)體驗(yàn)，純邏輯工程化思
維濃郁則更適合偏后開(kāi)發(fā)，數(shù)學(xué)物理強(qiáng)悍可以考慮數(shù)據(jù)可視化方向，溝通協(xié)調(diào)能力很強(qiáng)可以朝著前端運(yùn)營(yíng)方向努力。
</li>
<li class="item">
在學(xué)生時(shí)代，大家都很純粹，我喜歡這個(gè)就學(xué)這個(gè)，例如，很多女生很喜歡CSS，寫(xiě)頁(yè)面，做效果。但是，等她開(kāi)始找工作，還是接
觸真實(shí)的行業(yè)圈子的時(shí)候，事情就發(fā)生了變化。
</li>
</ul>
</body>
使用margin負(fù)值有一個(gè)缺點(diǎn)，如圖：
底部邊框不見(jiàn)了，因?yàn)楸桓冈氐膐verflow: hidden;切割掉了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了css設(shè)置多列等高布局的方法示例的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-21
前端應(yīng)該掌握的CSS實(shí)現(xiàn)多列等高布局技巧
我們?cè)趯?xiě)頁(yè)面的時(shí)候，有的時(shí)候會(huì)遇到多欄布局，這篇文章主要介紹了前端應(yīng)該掌握的CSS實(shí)現(xiàn)多列等高布局技巧，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟2018-06-05利用CSS3的flexbox實(shí)現(xiàn)水平垂直居中與三列等高布局
這篇文章給大家介紹了三個(gè)小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實(shí)現(xiàn)水平垂直居中對(duì)齊和三列等高自適應(yīng)頁(yè)腳區(qū)域黏附底部的布局，有需要的可以參考2016-09-12- 下面小編就為大家?guī)?lái)一篇淺析CSS等高布局的6種方式。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-04
用CSS實(shí)現(xiàn)三列DIV等高布局以傳達(dá)更好的視覺(jué)效果
頁(yè)面布局中經(jīng)常遇到等高布局的情況，為了得到更好的視覺(jué)效果，就要實(shí)現(xiàn)DIV等高布局的效果。以最普遍的DIV三列布局來(lái)說(shuō)2014-09-03- 這種情況下就需要兩列的高度保持一致了，左邊高度增加，右邊也跟著增加，右邊高度增加，左邊同樣也要增加，否則就會(huì)出現(xiàn)“斷層”的效果,接下來(lái)將介紹多列等高的實(shí)現(xiàn)方法，2012-12-03
- CSS網(wǎng)頁(yè)布局實(shí)例:三欄等高布局.2009-08-29
CSS實(shí)例：CSS實(shí)現(xiàn)的等高網(wǎng)頁(yè)布局
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：為了讓網(wǎng)頁(yè)更美觀(guān)、協(xié)調(diào)，有的時(shí)候需要用到左右等到布局，傳統(tǒng)的等高布局是用 javascript 實(shí)現(xiàn)的，現(xiàn)在來(lái)看看 silence 發(fā)明的真正的 CSS 實(shí)現(xiàn)的等2009-04-02CSS實(shí)例:三列等高布局-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
三列等高CSS布局的一個(gè)實(shí)例， 修改國(guó)外的一個(gè)demo， 兼容到了IE5.5 和標(biāo)準(zhǔn)的瀏覽器OperaFirefoxSafari。 不過(guò)hack太多，不是很喜歡這樣做。 全部代碼如下2008-10-17
