css實現左（右）側固定寬度，右（左）側寬度自適應 ---清除浮動-css教學-PHP中文網

css實現左（右）側固定寬度，右（左）側寬度自適應 ---清除浮動

高洛峰

發布： 2016-10-15 09:17:38

原創

1337 人瀏覽過

老話長談，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;}

登入後複製