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

資訊專欄INFORMATION COLUMN

CSS+DIV自適應布局

Cruise_Chan / 2597人閱讀

摘要：自適應布局兩列布局左右兩側(cè)，左側(cè)固定寬度右側(cè)自適應占滿代碼如下左右兩側(cè)，左側(cè)固定寬度右側(cè)自適應占滿運行結(jié)果如下圖兩欄布局左定寬，右自動三列布局左中右三列，左右固定，中間自適應占滿方法一左右浮動，中間，中間在最后代碼如下左中右三列，

CSS+DIV自適應布局 1.兩列布局（左右兩側(cè)，左側(cè)固定寬度200px;右側(cè)自適應占滿） 代碼如下： 


    
        
        左右兩側(cè)，左側(cè)固定寬度200px;右側(cè)自適應占滿
運行結(jié)果如下圖：

兩欄布局（左定寬，右自動）

float + margin

2.三列布局（左中右三列，左右200px固定，中間自適應占滿） 方法一（左右浮動，中間 margin-left,margin-right，中間div在最后）

代碼如下



    
        
        左中右三列，左右200px固定，中間自適應占滿 方法一

運行結(jié)果如下圖

方法二(左中右定位)：

代碼如下



    
        
        左中右三列，左右200px固定，中間自適應占滿 方法二

運行結(jié)果如下圖：

3.上中下三行，頭部，底部固定高200px，中間自適應占滿 中間定位，底部定位

代碼如下：



    
        
        上中下三行，頭部，底部固定高200px，中間自適應占滿

運行代碼如下圖：

4.上下兩部分，地下這個股東高度200px,如果上面的內(nèi)容少，那么這個footer就固定在底部，如果內(nèi)容多，就把footer往下擠

代碼如下：



    
        
        上下兩部分，地下這個股東高度200px,如果上面的內(nèi)容少，
        那么這個footer就固定在底部，如果內(nèi)容多，就把footer往下擠
        
    
    
            
    
        sdsadas

        sdsadas

        sdsadas

        sdsadas
        sdsadas

        sdsadas

        sdsadas

        sdsadas

        sdsadas

        sdsadas

        sdsadas

        sdsadas

        sdsadas

運行結(jié)果如下圖：

新手入門，請多多關(guān)照

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116878.html

相關(guān)文章

  • css中的那些布局

    摘要：張鑫旭老師的博客是左邊流式布局，右邊固定寬度左浮動因為浮動會導致元素脫離文檔流，所以下面的元素會占據(jù)浮動元素原來的位置。代碼左浮動實現(xiàn)兩列布局絕對定位實現(xiàn)兩列布局這個原理類似浮動，因為絕對定位會脫離文檔流，只需要設置右的就能實現(xiàn)布局。 因為最近心血來潮，就總結(jié)了一下css中的幾種常見的多列布局。 兩列自適應布局 兩列自適應布局算是css布局里面最基礎的一種布局了，不少網(wǎng)站在使用。 這...

    liangzai_cool 評論0 收藏0

  • css中的那些布局

    摘要：張鑫旭老師的博客是左邊流式布局，右邊固定寬度左浮動因為浮動會導致元素脫離文檔流，所以下面的元素會占據(jù)浮動元素原來的位置。代碼左浮動實現(xiàn)兩列布局絕對定位實現(xiàn)兩列布局這個原理類似浮動，因為絕對定位會脫離文檔流，只需要設置右的就能實現(xiàn)布局。 因為最近心血來潮，就總結(jié)了一下css中的幾種常見的多列布局。 兩列自適應布局 兩列自適應布局算是css布局里面最基礎的一種布局了，不少網(wǎng)站在使用。 這...

    phodal 評論0 收藏0

  • css上中下布局自適應中間，左右布局自適應左側(cè)display: table

    摘要：在我們經(jīng)常用到固定頭部和底部，自適應中間部分，或者固定左側(cè)，自適應右側(cè)等。在網(wǎng)上看了很多方法，一般都是通過絕對定位完成，具體可以網(wǎng)上去搜，這樣可以完成上中下的布局，但是這次基礎上再做左右布局浮動會出現(xiàn)問題，具體什么問題我沒有深究。 在css我們經(jīng)常用到固定頭部和底部，自適應中間部分，或者固定左側(cè)，自適應右側(cè)等。在網(wǎng)上看了很多方法，一般都是通過絕對定位完成，position: absol...

    Baaaan 評論0 收藏0

  • CSS+DIV自適應布局

    摘要：自適應布局兩列布局左右兩側(cè)，左側(cè)固定寬度右側(cè)自適應占滿代碼如下左右兩側(cè)，左側(cè)固定寬度右側(cè)自適應占滿運行結(jié)果如下圖兩欄布局左定寬，右自動三列布局左中右三列，左右固定，中間自適應占滿方法一左右浮動，中間，中間在最后代碼如下左中右三列， CSS+DIV自適應布局 1.兩列布局（左右兩側(cè)，左側(cè)固定寬度200px;右側(cè)自適應占滿） 代碼如下： 左右...

    sanyang 評論0 收藏0

  • 常見的面試問題：【CSS】已知高度，寫出三欄布局

    摘要：問題已知高度，寫出三欄布局，其中左右兩欄寬度各位，中間自適應回答效果示例解決方案浮動絕對定位彈性布局表格布局網(wǎng)格布局。方案二絕對定位將和的都設置脫離文檔流，給的設置左右兩邊距離即左右兩邊盒子的實際寬度。 問題： 已知高度，寫出三欄布局，其中左右兩欄寬度各位200px，中間自適應showImg(https://segmentfault.com/img/bVbu6r1?w=300&h=1...

    MobService 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<