成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

假設(shè)高度已知,請(qǐng)寫(xiě)出三欄布局,其中左欄右欄寬度各為300px,中間自適應(yīng)

MiracleWong / 1683人閱讀

摘要:浮動(dòng)布局絕對(duì)布局彈性布局表格布局網(wǎng)格布局全部代碼部分浮動(dòng)布局通過(guò)把多個(gè)類(lèi)選擇器鏈接在一起,僅可以選擇同時(shí)包含這些類(lèi)名的元素類(lèi)名的順序不限兩者之間無(wú)空格例如被選擇的元素浮動(dòng)解決方案這是三欄布局

1、浮動(dòng)布局
.layout.float .left{
                     float: left;
                     width: 300px;
                     background: red;
                 }
                 .layout.float .right{
                     float: right;
                     width: 300px;
                     background: blue;
                 }
                 .layout.float .center{
                     background: yellow;
                 }
2、絕對(duì)布局
.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、網(wǎng)格布局
.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
        
    
    
         
         

浮動(dòng)解決方案

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

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

絕對(duì)定位解決方案

1、這是三欄布局絕對(duì)定位中間部分

2、這是三欄布局絕對(duì)定位中間部分

flexbox解決方案

1、這是三欄布局flexbox中間部分

2、這是三欄布局flexbox中間部分

表格布局

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

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

網(wǎng)格布局

1、這是三欄布局網(wǎng)格布局中間部分

2、這是三欄布局網(wǎng)格布局中間部分

7、效果圖

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/116277.html

相關(guān)文章

  • 假設(shè)高度已知,請(qǐng)寫(xiě)出三欄布局,中左欄、右欄各為300px中間適應(yīng)的五種方法

    摘要:假設(shè)高度已知,請(qǐng)寫(xiě)出三欄布局,其中左欄右欄各為,中間自適應(yīng)的五種方法頁(yè)面布局題目假設(shè)高度已知,請(qǐng)寫(xiě)出三欄布局,其中左欄右欄各為,中間自適應(yīng)浮動(dòng)解決方案浮動(dòng)解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕 假設(shè)高度已知,請(qǐng)寫(xiě)出三欄布局,其中左欄、右欄各為300px,中間自適應(yīng)的五種方法 HTML CSS 頁(yè)面布局 題目:假設(shè)高度已知,請(qǐng)寫(xiě)出三欄布局,其中左欄、右欄各為300px...

    alaege 評(píng)論0 收藏0
  • 假設(shè)高度已知,請(qǐng)寫(xiě)出三欄布局,中左欄、右欄各為300px中間適應(yīng)的五種方法

    摘要:假設(shè)高度已知,請(qǐng)寫(xiě)出三欄布局,其中左欄右欄各為,中間自適應(yīng)的五種方法頁(yè)面布局題目假設(shè)高度已知,請(qǐng)寫(xiě)出三欄布局,其中左欄右欄各為,中間自適應(yīng)浮動(dòng)解決方案浮動(dòng)解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕 假設(shè)高度已知,請(qǐng)寫(xiě)出三欄布局,其中左欄、右欄各為300px,中間自適應(yīng)的五種方法 HTML CSS 頁(yè)面布局 題目:假設(shè)高度已知,請(qǐng)寫(xiě)出三欄布局,其中左欄、右欄各為300px...

    Shihira 評(píng)論0 收藏0
  • 實(shí)現(xiàn)三欄布局的幾種方法

    摘要:前言三欄布局,顧名思義就是兩邊固定,中間自適應(yīng)。三欄布局在實(shí)際的開(kāi)發(fā)十分常見(jiàn),比如淘寶網(wǎng)的首頁(yè),就是個(gè)典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度,中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局,顧名思義就是兩邊固定,中間自適應(yīng)。三欄布局在實(shí)際的開(kāi)發(fā)十分常見(jiàn),比如淘寶網(wǎng)的首頁(yè),就是個(gè)典型的三欄布局:即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度,中間的主要內(nèi)容隨瀏覽器寬...

    golden_hamster 評(píng)論0 收藏0
  • 實(shí)現(xiàn)三欄布局的幾種方法

    摘要:前言三欄布局,顧名思義就是兩邊固定,中間自適應(yīng)。三欄布局在實(shí)際的開(kāi)發(fā)十分常見(jiàn),比如淘寶網(wǎng)的首頁(yè),就是個(gè)典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度,中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局,顧名思義就是兩邊固定,中間自適應(yīng)。三欄布局在實(shí)際的開(kāi)發(fā)十分常見(jiàn),比如淘寶網(wǎng)的首頁(yè),就是個(gè)典型的三欄布局:即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度,中間的主要內(nèi)容隨瀏覽器寬...

    IamDLY 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<