使用css實現左（右）側固定寬度，右（左）側寬度自適應方法介紹-css教學-PHP中文網

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

高洛峰

發布： 2017-03-17 14:03:28

原創

1612 人瀏覽過

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

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