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

資訊專欄INFORMATION COLUMN

CSS+DIV自適應(yīng)布局

sanyang / 2657人閱讀

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

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


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

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

float + margin

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

代碼如下



    
        
        左中右三列，左右200px固定，中間自適應(yīng)占滿 方法一

運(yùn)行結(jié)果如下圖

方法二(左中右定位)：

代碼如下



    
        
        左中右三列，左右200px固定，中間自適應(yīng)占滿 方法二

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

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

代碼如下：



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

運(yùn)行代碼如下圖：

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

代碼如下：



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

        sdsadas

        sdsadas

        sdsadas
        sdsadas

        sdsadas

        sdsadas

        sdsadas

        sdsadas

        sdsadas

        sdsadas

        sdsadas

        sdsadas

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

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

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

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

相關(guān)文章

  • css中的那些布局

    摘要：張鑫旭老師的博客是左邊流式布局，右邊固定寬度左浮動因?yàn)楦訒?dǎo)致元素脫離文檔流，所以下面的元素會占據(jù)浮動元素原來的位置。代碼左浮動實(shí)現(xiàn)兩列布局絕對定位實(shí)現(xiàn)兩列布局這個(gè)原理類似浮動，因?yàn)榻^對定位會脫離文檔流，只需要設(shè)置右的就能實(shí)現(xiàn)布局。 因?yàn)樽罱难獊沓保涂偨Y(jié)了一下css中的幾種常見的多列布局。 兩列自適應(yīng)布局 兩列自適應(yīng)布局算是css布局里面最基礎(chǔ)的一種布局了，不少網(wǎng)站在使用。 這...

    liangzai_cool 評論0 收藏0

  • css中的那些布局

    摘要：張鑫旭老師的博客是左邊流式布局，右邊固定寬度左浮動因?yàn)楦訒?dǎo)致元素脫離文檔流，所以下面的元素會占據(jù)浮動元素原來的位置。代碼左浮動實(shí)現(xiàn)兩列布局絕對定位實(shí)現(xiàn)兩列布局這個(gè)原理類似浮動，因?yàn)榻^對定位會脫離文檔流，只需要設(shè)置右的就能實(shí)現(xiàn)布局。 因?yàn)樽罱难獊沓?，就總結(jié)了一下css中的幾種常見的多列布局。 兩列自適應(yīng)布局 兩列自適應(yīng)布局算是css布局里面最基礎(chǔ)的一種布局了，不少網(wǎng)站在使用。 這...

    phodal 評論0 收藏0

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

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

    Baaaan 評論0 收藏0

  • CSS+DIV自適應(yīng)布局

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

    Cruise_Chan 評論0 收藏0

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

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

    MobService 評論0 收藏0

發(fā)表評論

0條評論

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