在div裡實現它的一個子div定寬,而另一個子div獲取剩下的寬度
阿新 • • 發佈:2019-02-13
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後剩下的寬度。
另:本人是菜鳥,這是今天剛想出來的方法,不喜勿噴,有哪裡說得不對或者有更好的方法的話希望指出提出,謝謝。