本篇文章給大家?guī)淼膬?nèi)容是關(guān)于css實(shí)現(xiàn)等高布局的三種方式（代碼示例）酪夷，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助皮钠。
本文講的等高布局是在不手動(dòng)設(shè)置元素高度的情況下，使用純css實(shí)現(xiàn)各個(gè)元素高度都相當(dāng)?shù)男ЧāＨ鐖D：
首先小編在這里謝謝大家一直的支持麦轰，每天都會(huì)更新十個(gè)web前端基礎(chǔ)內(nèi)容，需要的可以關(guān)注我砖织，另外也可以進(jìn)我的web學(xué)習(xí)交流群1045267283款侵，領(lǐng)取資料學(xué)習(xí)資料筆記，可以跟里面的小伙伴一起學(xué)習(xí)一起成長(zhǎng)侧纯，不懂的問題也可以問我新锈，隨時(shí)給大家解答。再次感謝大家眶熬。
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è)置寬度就沒有效果了，因此需要再包裹一層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ā)展必然帶來職業(yè)的細(xì)分墩新，在前端領(lǐng)域也一樣，目前行業(yè)前端有下面這幾個(gè)方向：界面展現(xiàn)用戶體驗(yàn)和可訪問性方向窟坐、
后的js/nodejs開發(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ì)背景可以專注于用戶體驗(yàn)，純邏輯工程
化思維濃郁則更適合偏后開發(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驮樊，寫頁(yè)面，做效果片酝。但是囚衔，等她開始找工作，
還是接觸真實(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ā)展必然帶來職業(yè)的細(xì)分审轮，在前端領(lǐng)域也一樣肥哎，目前行業(yè)前端有下面這幾個(gè)方向：界面展現(xiàn)用戶體驗(yàn)和可訪問性方向、偏后
的js/nodejs開發(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ì)背景可以專注于用戶體驗(yàn)达椰，純邏輯工程化思
維濃郁則更適合偏后開發(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埃碱，寫頁(yè)面猖辫，做效果。但是砚殿，等她開始找工作啃憎，還是接
觸真實(shí)的行業(yè)圈子的時(shí)候，事情就發(fā)生了變化似炎。
</li>
</ul>
</body>
3辛萍、利用margin實(shí)現(xiàn)等高布局(實(shí)際開發(fā)中不建議使用)
實(shí)現(xiàn)上面的等高布局除了可以使用table-cell、flex布局外還可以利用margin負(fù)值來實(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ā)展必然帶來職業(yè)的細(xì)分羡藐，在前端領(lǐng)域也一樣贩毕，目前行業(yè)前端有下面這幾個(gè)方向：界面展現(xiàn)用戶體驗(yàn)和可訪問性方向、偏后
的js/nodejs開發(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ì)背景可以專注于用戶體驗(yàn)规辱，純邏輯工程化思
維濃郁則更適合偏后開發(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付秕，寫頁(yè)面兰珍，做效果。但是询吴，等她開始找工作掠河，還是接
觸真實(shí)的行業(yè)圈子的時(shí)候亮元，事情就發(fā)生了變化。
</li>
</ul>
</body>
使用margin負(fù)值有一個(gè)缺點(diǎn)唠摹，如圖：
底部邊框不見了爆捞，因?yàn)楸桓冈氐膐verflow: hidden;切割掉了。
以上就是css實(shí)現(xiàn)等高布局的三種方式（代碼示例）的詳細(xì)內(nèi)容勾拉。
