使用css實現左（右）側固定寬度，右（左）側寬度自適應方法介紹

老話長談，css的不固定適應佈局   不管是面試還是在平時的工作中，這樣的佈局形式一直都在用著，很常見，所以今天我就拿出來在嘮叨一下， 既是給自己一個備忘存儲，也是一個學習鞏固的參考，知道大家都會，還是要記憶一下，不為其他，就為打好基礎。

話說太多， 直接上程式碼，一看就能明白。 也許你會不屑一顧的說簡單，可是我就喜歡寫一些。 。 。 。 。 。身為菜鳥，就要從基礎努力學習才行。

方法多種， 你有新的方法可以補充說明，在此感謝！ ！

一、左邊佈局固定，右邊自適應的佈局

#  *{ margin:0; padding:0}

   .whole{ width:100%;}

 

       

自適應測試

#   

自適應測試< p class="
left">固定左側300px

        

">右側自適應

 

 方法1：左邊用float浮動，給予固定寬度，右邊左邊距的距離==左側層的寬度

  　　css程式碼:　　　　
.left{ float:left;width:300px; background#:left;width:300px;
back :red}　　　　.right{ margin-left

:300px; background:green; }

## 方法2：左## 方法2：左邊# absolate，右邊程式碼沒變化還是

右側左邊距的距離==左側層的寬度

;

　　css程式碼:

　　　　.left{

position: absolute; left:0; width:300px; background:red}　　　　　　left :300px; background:green; }

  方法3（個人喜好用）：

左右兩邊都用絕對定位absolute， 父級相對定義（不影響，建議加個相對定義，避免重疊） #　　css程式碼:

　　　　

#.left{ position: absolute; left:0; width:300px; background:red}

#　　　　.right{ position: absolute; left:300px; background:green; }二、左邊佈局佈局不固定，右邊佈局固定-----方法一致，位置換下而已#   #

       

自適應測試

           

左側自適應

< ;/p>###        

右側寬度固定

### 

################## #####  方法1、左邊用###左浮動，###################右邊距==右側層的寬度的負值（因為你是左撐開，距離右邊的距離不錯層）#####################，### 右邊的有浮動，固定寬度#### ##################

      .left{ float: left; width:100%; margin-right:-300px; background: red; }##　　.right{ float: right; width: 300px ;background: blue;}

 方法2、左右兩邊都用絕對定位absolute， 父級相對定義（不影響，建議加上相對定義，避免重疊）      

# .left{ position: absolute; left:0;  width: 100%;  background: red;}

　　.right{ position: absolute;  left:200px; width:200px; back#dgreen;

# 方法3 、

 #  ## 清除浮動的方法就一筆帶過， 都會#    1、

##定義一個層



#

   .clear{ clear:both}

    2、偽類別方法:after (用在父類別的佈局層上)-常用

####################         ######## #################################.father::after,.father:###:before###{ clear: both; content: ""; ###display###: table;}############################## #########  　　

###       　　

#

#H　 　 　　Hlt;

#H　 　sonH); flotrgt">

###  　　

###############################################################################################################################################################################################1 ############　　3、父級元素###設定###overflow###為hidden或auto，固定高度也可以--不建議###　###### ##################

         .#father#{#overflow :hidden; width: 100%; }　  //overflow:auto; height:300px;

##寫的都比較簡單， 文字表述很少，都是程式碼，說的思路再多，不讓直接程式碼實際，用了後就明白意思了，good lucky。 。

 

#補充-- 禁止橫屏

在垂直畫面下瀏覽​​效果更佳！

.orientation-alert{
background: rgba(0,0,0,.85);position: fixed ;left: 0;

top
: 0;height: 100%;width: 100%;

z-index
: 1000000;
color: #FFF;
display: none;
}
.orientation-alert p{
position: absolute;width: 100%;top: 50%;
font-size: 20px;
#line-height: 30px;
margin-top#: -15px;

text-align
: center;
}
@media screen and (orientation : landscape){
.orientation-alert{
     display: block;
   }
}
@media screen and (orientation : portrait){
.orientation-alert{     display: none;#   }#}

#####################################################################################################################################################################################################################1 ###########

以上是使用css實現左（右）側固定寬度，右（左）側寬度自適應方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！