使用float:right後內容下移換行的原因及解決方案
阿新 • • 發佈:2019-01-28
問題:
如下圖所示,使用float:right;之後,右邊的內容換行了,程式碼如下:
<style>
.fl{width:100%;text-align:center;}
.fll{width:30%;background-color:#ff0;}
.flr{width:70%;background-color:#f00;float:right;}
</style>
<div class="fl">
<div class="fll">我浮動於左側</div>
<div class="flr">我浮動於右側</div>
</div >
原因分析:
當非float的元素和float的元素在一起的時候,如果非float元素在先,那麼float的元素將被排斥也就是說,你的span是float:right,但是你文字還是float:none。【注意點:元素浮動後將自動轉為塊級元素】
解決辦法:
(1)把類名為flr的程式碼放在前面
<style>
.fl{width:100%;text-align:center;}
.fll{width:30%;background-color:#ff0;}
.flr{width:70%;background-color:#f00;float:right;}
</style >
<div class="fl">
<div class="flr">我浮動於右側</div>
<div class="fll">我浮動於左側</div>
</div>
(2)給左邊的程式碼也加上浮動屬性
<style>
.fl{width:100%;text-align:center;}
.fll{width:30%;background-color:#ff0;float:left;}
.flr{width:70%;background-color:#f00;float:right;}
</style>
<div class="fl">
<div class="fll">我浮動於左側</div>
<div class="flr">我浮動於右側</div>
</div>