1. 程式人生 > >在div裡實現它的一個子div定寬,而另一個子div獲取剩下的寬度

在div裡實現它的一個子div定寬,而另一個子div獲取剩下的寬度

html:

<div class="include_AandB">
    <div class="A">
        
        </div>
        <div class="b">
       
        </div>
</div>

CSS:

.include_AandB{width:80%;background-color:red;height:100px;margin:0 auto;position:relative;}
.A{width:300px;background-color:green;height:100px;float:left;}
.B{background-color:#039;height:100px;position:absolute;right:0px;top:0;left:300px;}

說明:

include_AandB: 設定寬度和高度,然後利用position:relative讓它成為被子div定位的參照元素。

A:設定固定寬度300px,左飄

B:利用position:absolute設定以include_AandB為參照物的絕對定位,然後再設定right:0使它右邊距離include_AandB的寬度為0,設定left:300px使它左邊距離A的長度為A的寬度。

綜上:這樣的話無論include_AandB的寬度如何變化,B始終能獲取include_AandB除去A後剩下的寬度。

另:本人是菜鳥,這是今天剛想出來的方法,不喜勿噴,有哪裡說得不對或者有更好的方法的話希望指出提出,謝謝。