1. 程式人生 > >div+css左右結構 一邊固定另一邊自適應技巧

div+css左右結構 一邊固定另一邊自適應技巧

div+css左右結構 一邊固定另一邊自適應技巧


1、左邊固定,右邊自適應

<div>

    <div  style="float:right;margin:0 0 0 -30px; width:100%">

        <div  style="margin:0 0 0 30px; background:#e4e4e4">這裡是<Br />右邊的內這裡是<Br />右邊的內這裡是<Br />右邊的內這裡是<Br />右邊的內這裡是<Br />右邊的內這裡是<Br />右邊的內這裡是<Br />右邊的內這裡是<Br />右邊的內這裡是<Br />右邊的內這裡是<Br />右邊的內這裡是<Br />右邊的內這裡是<Br />右邊的內這裡是<Br />右邊的內這裡是<Br />右邊的內容</div>

    </div>

    <div style="float:left;width:30px; background:#669999">這裡左邊部分</div>

</div>

2、右邊固定,左邊自適應

<div>

<div  style="float:right;width:200px; background:#669999">這裡右邊部分</div>

    <div  style="float:left;margin:0 -215px 0 0; width:100%">

    <div  style="margin:0 215px 0 0; background:#e4e4e4">這裡是左邊的內容</div>

</div>

</div>

------------------------------

很顯然要固定一方必須要設定寬度,設定寬度的一方就一層div。

而自適應的那邊div後外面又包一層div,內外兩個div要設定一樣的外邊距  並且外面用複數 裡面用正數。

轉自:http://hjing628.blog.163.com/blog/static/12629311420123123148160/