CSS中常見自適應佈局有哪些

CSS中常見自適應佈局有：左邊定寬右邊自適應；右邊定寬左邊自適應；兩邊定寬中間自適應

今天將介紹的是CSS中常見的自適應佈局，有一定的參考價值，希望對大家有幫助。接下來在文章中將為大家詳細介紹自適應版面的幾種方法

【推薦課程：CSS課程 】

自適應佈局：

自適應佈局的特點是根據不同的裝置其螢幕尺寸的大小來自於適應，也就是在每個靜態佈局中，頁面元素會隨著視窗的大小的調整而改變

#方法一

#左邊固定右邊自適應，一般用於行動裝置Web的清單展示

HTML程式碼

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    </div>

實作方法：給父元素一個絕對定位使其子元素可以撐開父元素高度，固定一邊定寬且左浮動，右邊自適應的寬高給百分比

 <style type="text/css">
    .box{
         position: absolute;
        width:100%;
        height: 100%;
    }
     .left{
            width:200px;
            height:100%;
            background: pink;
            float: left;
        }
        .right{
            width:100%;
            height:100%;
            background: skyblue;
        }
    </style>

效果圖：

##方法二

左邊自適應，右邊定寬

display:table-cell屬性就是讓標籤元素以表格儲存格的形式呈現，類似td標籤，這個屬性只適用於目E8瀏覽器及其以上版本的和其他現代瀏覽器都是支援此屬性的。這個屬性的使用為我們的自適應佈局帶來簡單

HTML程式碼：

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    </div>

實作方法：給父元素設定為table元素再透過display:table-cell完成

.box{
    position: absolute;
     width:100%;
    height: 100%;
    display: table;
    table-layout: fixed;
    }
.left {
    width: 200px;
    height:100%;
    display:table-cell;
    background: pink;
    }

.right {
   display: table-cell;
   width:100%;
   height: 100%;
   display: table-cell;
     background: skyblue;
        }
    </style>

效果圖：

方法三

兩邊定寬中間自適應

HTML程式碼

<div class="box">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
    </div>

實作方法：flex 屬性是用於設定或檢索彈性盒模型物件的子元素如何指派空間。 ###

 .box{
 position: absolute;
 display: flex;
 width: 100%;
 height: 100%;
    }
 .left {
 width: 200px;
height:100%;
 float:left;
background: pink;}
.content{
float: left;
height: 100%;
flex: 1;
 background-color:#f1f19b;
}
.right {
 display: table-cell;
width:200px;
height: 100%;
 float: left;
background: skyblue;
        }

###效果圖如下：###############總結：以上就是這篇文章的全部內容，希望透過這篇文章可以讓大家對自適應版面有一定的了解。 ###

以上是CSS中常見自適應佈局有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！