老話長談,css的不固定適應佈局 不管是面試還是在平時的工作中,這樣的佈局形式一直都在用著,很常見,所以今天我就拿出來在嘮叨一下, 既是給自己一個備忘存儲,也是一個學習鞏固的參考,知道大家都會,還是要記憶一下,不為其他,就為打好基礎。
話說太多, 直接上程式碼,一看就能明白。 也許你會不屑一顧的說簡單,可是我就喜歡寫一些。 。 。 。 。 。身為菜鳥,就要從基礎努力學習才行。
方法多種, 你有新的方法可以補充說明,在此感謝! !
一、左邊佈局固定,右邊自適應的版面
<div class="whole"> <p>自适应测试</p> <div class="left">固定左侧 300px</div> <div class="right">右侧自适应</div> </div>
方法1: 左側用float浮動,給固定寬度,右側左邊距的距離==左側層的寬度
css代碼:
方法2:左邊絕對定位absolate,右邊程式碼沒變化還是右邊左邊距的距離==左側層的寬度;
css代碼:
.left{ float:left;width:300px; background:red} .right{ margin-left:300px; background:green; width:100%}
方法3(個人喜好使用):左右兩邊都用絕對定位absolute, 父級相對定義(不影響,建議加個相對定義,避免重疊)
css代碼:
.left{ position: absolute; left:0; width:300px; background:red} .right{ margin-left:300px; background:green; width:100%}
二、左邊佈局不固定,右邊佈局固定-----方法一致,位置換下而已
.left{ position: absolute; left:0; width:300px; background:red} .right{ position: absolute; left:300px; background:green; width:100%}
方法1、左側用左浮動,右邊距==右側層的寬度的負值(因為你是左撐開,距離右側的距離不錯層), 右側的有浮動,固定寬度
<div class="whole"> <p>自适应测试</p> <div class="left">左侧自适应</div> <div class="right">右侧宽度固定</div> </div>
方法2、左右兩邊都用絕對定位absolute, 父級相對定義(不影響,建議加上相對定義,避免重疊)
.left{ float:left; width:100%; margin-right:-300px; background: red; } .right{ float: right; width: 300px;background: blue;}
方法3、
、在浮動層的下面單獨定義一個層
.clear{ clear:both}
2、偽類方法:after (用在父類的佈局層上)-常用父類為hidden或auto,固定高度也可以--不建議
.left{ position: absolute; left:0; width: 100%; background: red;} .right{ position: absolute; left:200px; width:200px; background: green;}