真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

    .wrap {background: #eee; padding: 20px; }
    p {margin: 0; }
    .left {width: 200px; height: 200px; float: left; background: coral; }
    .right {width: 200px; height: 200px; float: right; background: lightblue; }
    .middle {margin: 0 200px; background: lightpink; }



    我在左邊

    我在右邊

    我排最后，但是跑到中間來了

    .wrap {background: #eee; padding: 20px; }
    p {margin: 0; }
    .left {width: 200px; height: 200px; float: left; background: coral; margin-left: -100%;}
    .right {width: 200px; height: 200px; float: left; background: lightblue; margin-left: -200px;}
    .middle {width: 100%; height: 200px;float: left; background: lightpink; }
    span{
        display: inline-block;
        margin: 0 200px;
    }



    
        
            我在中間
         
    

    我在左邊

    我在右邊

    .wrap {background: #eee; position: relative;}
    p {margin: 0; }
    .left {width: 200px; height: 200px; background: coral; position: absolute;left: 0; top: 0;}
    .right {width: 200px; height: 200px; background: lightblue; position: absolute;right: 0; top: 0;}
    .middle {height: 200px; background: lightpink; margin: 0 200px;}



    我在中間，我用 margin 抵消左右兩塊定位元素占據(jù)空間

    我在左邊，我是定位元素

    我在右邊，我是定位元素

原理：

• 左右兩個元素定位，可放任意位置。

• 中間元素用 margin: 0 200px，防止內(nèi)容跑到左右兩塊定位元素下面被遮蓋。

flex

    .wrap {background: #eee; display: flex}
    p {margin: 0; }
    .left {width: 200px; height: 200px; background: coral; }
    .right {width: 200px; height: 200px; background: lightblue; }
    .middle {height: 200px; background: lightpink; flex: 1;}



    我在左邊

    我在中間，flex: 1 自動占據(jù)剩余空間

    我在右邊

原理：

• flex 布局，子元素默認(rèn)水平排列。

• flex: 0 1 auto -> 默認(rèn)，占據(jù)空間不跟隨父級放大，跟隨變小，自身本來寬度

• flex: 1 1 auto -> auto，占據(jù)空間跟隨父級放大，同時跟隨變小，自身本來寬度

• flex: 0 0 auto -> none，占據(jù)空間不跟隨父級放大，同時也不跟隨變小，自身本來寬度

• flex: 1 1 1 -> auto，占據(jù)空間跟隨父級放大，同時跟隨變小，并且自動占滿剩余空間

css的全稱是什么

css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。

關(guān)于使用css怎么實現(xiàn)兩邊固定中間自適應(yīng)布局就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。