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

資訊專欄INFORMATION COLUMN

常見的css布局

wayneli / 1164人閱讀

實(shí)現(xiàn)兩邊定寬，中間自適應(yīng)

1.圣杯布局

首先html結(jié)構(gòu)如下




    
    
    
    圣杯布局


    

        
2111111111111

        
left

        
right

css部分

效果如下圖，現(xiàn)在我們要讓left,和right懸浮在middle兩側(cè)

我們給middle、left、right都設(shè)置float：left,left讓它懸浮在左側(cè)設(shè)置margin-left:-100%(負(fù)的中間元素的寬度),right讓它懸浮在右側(cè)設(shè)置margin-right:-200px(負(fù)的自身的寬度)現(xiàn)在效果如下：

.left{
    margin-left:-100%;
    }
.right{
    margin-left:-200px;
    }
.left,right,.middle{
    float:left;
    }

現(xiàn)在要解決的是中間部分被left遮擋住了

給.content設(shè)置padding左右兩邊的.left、.right寬度, .left、.right設(shè)置相對定位

.content{
    padding:0 200px;
    }
.left,.right{
    position:relative;
    }
 .left{
    left:-200px;
    }
 .right{
    right:-200px;
    }

這樣可以實(shí)現(xiàn)兩邊定寬，中間自適應(yīng)完整代碼




    
    
    
    圣杯布局
    


    

        
2111111111111

        
left

        
right

效果圖如下:

2.雙飛翼布局

html結(jié)構(gòu)如下


        
211111111

        
left

        
right

css

.middle{
     width: 100%;
    background: paleturquoise;
    height: 200px;
    float: left;
    
}
.middle div{/*就是在middle里面添加div設(shè)置margin值實(shí)現(xiàn)中間自適應(yīng)*/
    margin-left: 200px;
    margin-right: 200px;
}
.left{
    background: palevioletred;
    width: 200px;
    height: 200px;
    float: left;
    font-size: 40px;
    color: #fff;
    margin-left:-100%;
}
.right{
    width: 200px;
    height: 200px;
    background: purple;
    font-size: 40px;
    float: left;
    color: #fff;
    margin-left:-200px;
}

完整代碼





    
    雙飛翼布局
    



    

        

            
211111111

        

        
left

        
right
圣杯布局，雙飛翼布局的區(qū)別

都是兩邊定寬，中間自適應(yīng)中間部分放在文檔流前面，全部都是設(shè)置float:left，區(qū)別在于中間部分不被遮擋。雙飛翼布局middle里面添加div設(shè)置左右的margin值

彈性盒布局 



    
    彈性盒子
    


    

        

        
11111111

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/117539.html

相關(guān)文章

  • 前端面試之CSS總結(jié)(上)

    摘要：重點(diǎn)介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內(nèi)邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結(jié) 由于最近在準(zhǔn)備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結(jié)。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細(xì)，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述...

    琛ｈ。 評論0 收藏0

  • 幾種常見的CSS布局

    摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

    FuisonDesign 評論0 收藏0

  • 幾種常見的CSS布局

    摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

    andot 評論0 收藏0

  • 幾種常見的CSS布局

    摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

    荊兆峰 評論0 收藏0

  • CSS常見布局與居中

    摘要：常用于控制頁面布局的定位機(jī)制普通流相對定位絕對定位和固定定位。左右布局最常用的就是通過浮動左浮或右浮來實(shí)現(xiàn)浮動。可以通過設(shè)置左右的外邊距為值來居中包括圖片。 這里，就CSS左右布局，左中右布局，水平與垂直居中，進(jìn)行討論。 CSS常用于控制頁面布局的定位機(jī)制：普通流、相對定位、絕對定位和固定定位。還可以使用float屬性來讓元素浮動。 1.左右布局 最常用的就是通過浮動（左浮或右浮）來實(shí)...

    April 評論0 收藏0

發(fā)表評論

0條評論

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