国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

立即前往

首頁/文章專欄/假設高度已知，請寫出三欄布局，其中左欄右欄寬度各為300px，中間自適應

假設高度已知，請寫出三欄布局，其中左欄右欄寬度各為300px，中間自適應

MiracleWong 發布于2019-08-30 15:44 / 1673人閱讀

摘要：浮動布局絕對布局彈性布局表格布局網格布局全部代碼部分浮動布局通過把多個類選擇器鏈接在一起，僅可以選擇同時包含這些類名的元素類名的順序不限兩者之間無空格例如被選擇的元素浮動解決方案這是三欄布局

1、浮動布局

.layout.float .left{
                     float: left;
                     width: 300px;
                     background: red;
                 }
                 .layout.float .right{
                     float: right;
                     width: 300px;
                     background: blue;
                 }
                 .layout.float .center{
                     background: yellow;
                 }

2、絕對布局

.layout.absolute .left-right-center>div {
                     position: absolute;
                 }
                 .layout.absolute .left{
                     left : 0;
                     width : 300px;
                     background : red;
                 }
                 .layout.absolute .center{
                     left : 300px;
                     right : 300px;
                     background : yellow;
                 }
                 .layout.absolute .right{
                     right:0;
                     width:300px;
                     background:blue;
                 }

3、彈性布局

.layout.flexbox{
                     margin-top : 140px;
                 }
                 .layout.flexbox .left-center-right {
                     display: flex;
                 } 
                 .layout.flexbox .left{
                     width : 300px;
                     background : red;
                 }
                 .layout.flexbox .center{
                     flex : 1;
                     background : yellow;
                 }
                 .layout.flexbox .right{
                     width : 300px;
                     background : blue;
                 }

4、表格布局

.layout.table .left-center-right {
                     width : 100%;
                     display : table;
                     height: 100px;
                 }
                 .layout.table .left-center-right>div {
                     display : table-cell;
                 }
                 .layout.table .left {
                     width : 300px;
                     background : red;
                 }
                 .layout.table .center {
                     background : yellow;
                 }
                 .layout.table .right {
                     width : 300px;
                     background : blue;
                 }

5、網格布局

.layout.grid .left-center-right {
                     display : grid;
                     width : 100%;
                     grid-template-rows: 100px;
                     grid-template-columns : 300px auto 300px;
                 }
                 .layout.grid  .left{
                     background : red;
                 }
                 .layout.grid  .center{
                     background : yellow;
                 }
                 .layout.grid  .right{
                     background : blue;
                 }

6、全部代碼部分



    
        
        layout
        
    
    
         
         
             
             
                 
                 
                 
                     浮動解決方案
                     1、這是三欄布局中間部分
                     2、這是三欄布局中間部分
                 
             
         
            
         
         
             
                
                    
                    
                    
                        絕對定位解決方案
                        1、這是三欄布局絕對定位中間部分
                        2、這是三欄布局絕對定位中間部分                        
                    
                
         
        
         
         
             
             
                 
                 
                     flexbox解決方案
                     1、這是三欄布局flexbox中間部分
                     2、這是三欄布局flexbox中間部分
                 
                  
             
         

         
         
             
             
                 
                 
                     表格布局
                     1、這是三欄布局表格布局中間部分
                     2、這是三欄布局表格布局中間部分
                 
                 
             
         

         
         
             
             
                 
                 
                        網格布局
                        1、這是三欄布局網格布局中間部分
                        2、這是三欄布局網格布局中間部分

7、效果圖

GPU云服務器云服務器左欄右欄高度自適應自適應寬度寬度自適應

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116277.html

假設高度已知，請寫出三欄布局，其中左欄、右欄各為300px，中間自適應的五種方法

摘要：假設高度已知，請寫出三欄布局，其中左欄右欄各為，中間自適應的五種方法頁面布局題目假設高度已知，請寫出三欄布局，其中左欄右欄各為，中間自適應浮動解決方案浮動解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕假設高度已知，請寫出三欄布局，其中左欄、右欄各為300px，中間自適應的五種方法 HTML CSS 頁面布局題目：假設高度已知，請寫出三欄布局，其中左欄、右欄各為300px...

alaege 2019-08-30 14:04 評論0 收藏0
假設高度已知，請寫出三欄布局，其中左欄、右欄各為300px，中間自適應的五種方法

摘要：假設高度已知，請寫出三欄布局，其中左欄右欄各為，中間自適應的五種方法頁面布局題目假設高度已知，請寫出三欄布局，其中左欄右欄各為，中間自適應浮動解決方案浮動解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕假設高度已知，請寫出三欄布局，其中左欄、右欄各為300px，中間自適應的五種方法 HTML CSS 頁面布局題目：假設高度已知，請寫出三欄布局，其中左欄、右欄各為300px...

Shihira 2019-08-01 18:40 評論0 收藏0
實現三欄布局的幾種方法

摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。但網格布局的兼容性不好。前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局：即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬...

golden_hamster 2019-08-02 11:55 評論0 收藏0
實現三欄布局的幾種方法

摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。但網格布局的兼容性不好。前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局：即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬...

IamDLY 2019-08-29 17:12 評論0 收藏0