CSS佈局——多列等高佈局
阿新 • • 發佈:2018-12-31
先看一個案例:
左邊是導航部分,右邊是詳細內容,兩者的高度都是不固定的。左邊導航欄的內容可能比右邊的內容高,反之亦然。但是兩者的背景顏色高度始終保持一致!
下面進入正題:
1、利用border實現
<div id="wrapper">
<div class="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</ div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
#wrapper {
display: inline-block;
width: 400px;
border-left: 200px solid #6ee0b6;
background-color: #c3c3ff;
}
.left {
float: left;
width: 200px;
margin-left : -200px;
border-right: 10px solid #999;
box-sizing: border-box;
padding: 20px;
}
.right {
float: left;
margin-left: -10px;
border-left: 10px solid #999;
padding: 20px;
}
效果如下:
右邊內容高的時,效果如下:
當然再使用border-right,就可以實現三列等高
。但是這種方法最多只能實現三列等高。不過利用這個方法已經可以完美解決開頭說的那個案例了! 相容IE8+
探索繼續~
2、利用css中的table屬性實現
<div class="table">
<div class="tableRow">
<div class="tableCell cell1">
<div>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
</div>
<div class="tableCell cell2">
<div>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
</div>
</div>
<div class="tableCell cell3">
<div>
<p>right</p>
<p>right</p>
</div>
</div>
</div>
</div>
.table {
width: 500px;
display: table;
}
.tableRow {
display: table-row;
}
.tableCell {
display: table-cell;
}
.cell1 {
background: #6ee0b6;
}
.cell2 {
background: #f3777b;
}
.cell3 {
background: #c3c3ff;
}
效果圖如下:
這種方法可以實現任意多列等高
! 相容IE8+
3、利用 margin 和 padding 對衝實現
這種方法最簡單,只需要將padding值設的足夠大,然後用相同大的負的margin來對衝。
<div id="wrapper">
<div class="column left">
<p>left</p>
<p>left</p>
</div>
<div class="column center">
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
</div>
<div class="column right">
<p>right</p>
<p>right</p>
</div>
</div>
#wrapper {
overflow: hidden;
}
.column {
float: left;
width: 200px;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.left {
background: #6ee0b6;
}
.center {
background: #f3777b;
}
.right {
background: #c3c3ff;
}
效果圖如下:
同樣的,這種方法也可以實現任意多列等高
! 相容IE6+
這幾種方法算是相容性、效果都比較好的,其他的奇巧淫技玩玩就好。
(完)