css多個div浮動float高度自適應的兩種方法

來源:互聯網
上載者:User
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>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.