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

資訊專欄INFORMATION COLUMN

常見(jiàn)的css布局

CastlePeaK / 1797人閱讀

實(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è)置相對(duì)定位

.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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

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

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

    ?。?。 評(píng)論0 收藏0

  • 幾種常見(jiàn)的CSS布局

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

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

  • 幾種常見(jiàn)的CSS布局

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

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

  • 幾種常見(jiàn)的CSS布局

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

    荊兆峰 評(píng)論0 收藏0

  • CSS常見(jiàn)布局與居中

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

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<