css多個div float並排,高度都自適應(自增)
採用 Div + CSS 進行三列或二列布局時,要使兩列(或三列)的高度相同,用 Table 很容易實現,但採用 Div + CSS 就顯得比較麻煩了。按照一般的做法,大都採用背景圖填充或 JS 指令碼的方法使高度相同。
方法一:純css解決辦法(“隱藏容器溢出”和“正內補丁”和“負外補丁”結合的方法):
<style type="text/css"><!--#wrap{overflow:hidden;}#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}--></style><div id="wrap" style="width:300px; background:#FFFF00;"> <div id="sidebar_left" style="float:left;width:100px; height:1000px; background:#FF0000;">Left</div> <div id="sidebar_mid" style="float:left;width:100px; background:#666;"> Middle<br /> Middle<br /> Middle<br /> Middle<br /> Middle<br /> Middle<br /> Middle<br /> Middle<br /> Middle<br /> </div> <div id="sidebar_right" style="float:right;width:100px; height:500px; background:#0000FF;">Right</div></div>
方法二:js解決辦法(思路,此方法不推薦):
<script>var a=Math.max(document.getElementById("left").offsetHeight,document.getElementById("center").offsetHeight,document.getElementById("right").offsetHeight); //擷取3個div的最大高度document.getElementById("left").style.height = a + "px";document.getElementById("center").style.height = a + "px";document.getElementById("right").style.height = a + "px";</script>