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

資訊專(zhuān)欄INFORMATION COLUMN

2種方法實(shí)現(xiàn)經(jīng)典的左側(cè)固定寬度200px，右側(cè)自適應(yīng)寬度的布局

raise_yang / 1430人閱讀

摘要：今天去面試前端人員，隨即出了一個(gè)經(jīng)典的布局問(wèn)題，即如標(biāo)題所示?？墒墙Y(jié)果令我很驚訝，超過(guò)一半的人都沒(méi)答對(duì)，亦或是只答對(duì)一半在此記錄下用兩種方法，第一種普通的方法，第二種是利用布局。

??????今天去面試前端人員，隨即出了一個(gè)經(jīng)典的布局問(wèn)題，即如標(biāo)題所示?？墒墙Y(jié)果令我很驚訝，超過(guò)一半的人都沒(méi)答對(duì)，亦或是只答對(duì)一半！在此記錄下用兩種方法，第一種普通的方法，第二種是利用flex布局。

首先我們假定頁(yè)面上已有下列元素：

第一種方法：float+margin-left

???這種方法是最簡(jiǎn)單也是最容易想到的方法(至少在我看來(lái))，請(qǐng)看如下CSS：

div{
    height:200px;
}
#left{
    float: left;
    width: 200px;
    background: blue;
}            
#right{
    margin-left: 200px;
    background: red;
}

???加上高度和背景是方便查看效果，將左側(cè)div浮動(dòng)，設(shè)置寬200px，右側(cè)的div設(shè)置一個(gè)左外邊距margin-left等于左側(cè)寬度，沒(méi)了！如此簡(jiǎn)單即可實(shí)現(xiàn)，可是在實(shí)際中，我看到的結(jié)果是有不寫(xiě)float直接margin-left的，也有寫(xiě)了float不寫(xiě)margin-left的，在此就不多說(shuō)了...

第二種方法：display+flex

???使用第二種方法的人我更是沒(méi)見(jiàn)到，好吧，這可能需要多了解一些flex布局的知識(shí)，那么請(qǐng)看如下CSS：

body{
    display: flex;
    flex-flow: row;
}
#left{                
    width: 200px;
    background: blue;
}            
#right{
    flex: 1;
    background: red;
}

???先來(lái)解釋下含義，首先將body的display為flex，讓body遵從flex布局，并且設(shè)置flex-flow為row，橫向的，然后就是左側(cè)div寬度200px，右側(cè)div的flex:1，這里很關(guān)鍵，1會(huì)將剩余寬度全部占滿，即如果左側(cè)寬度發(fā)生改變的話，右側(cè)能夠自適應(yīng)，而不用像第一種方法那樣margin-left也要修改。這就是display flex的強(qiáng)大之處，而在面試中，沒(méi)有一個(gè)人使用這種方法....

???好了，以上就是兩種實(shí)現(xiàn)該布局的方法了，或許有人說(shuō)，還有第三種方法呢，position:absolute，left:200px...那這種方法就留給大家去思考啦！ D:)

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

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

相關(guān)文章

  • css經(jīng)典布局之左側(cè)固定大小右側(cè)自動(dòng)適應(yīng)

    摘要：最近學(xué)習(xí)了一種經(jīng)典布局，固定左側(cè)或右側(cè)的寬度，另一側(cè)自適應(yīng)寬度，此種布局挺常用，尤其是像后臺(tái)，大部分都是采用這種結(jié)構(gòu)，還比如像訂餐類(lèi)的，進(jìn)入商家的時(shí)候，會(huì)出現(xiàn)一堆飯的列表，左側(cè)是飯的分類(lèi)，右側(cè)是飯的列表等等。 最近學(xué)習(xí)了一種經(jīng)典布局，固定左側(cè)或右側(cè)的寬度，另一側(cè)自適應(yīng)寬度，此種布局挺常用，尤其是像后臺(tái)，大部分都是采用這種結(jié)構(gòu)，還比如像訂餐類(lèi)的APP，進(jìn)入商家的時(shí)候，會(huì)出現(xiàn)一堆飯的列表，...

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

  • css經(jīng)典布局之左側(cè)固定大小右側(cè)自動(dòng)適應(yīng)

    摘要：最近學(xué)習(xí)了一種經(jīng)典布局，固定左側(cè)或右側(cè)的寬度，另一側(cè)自適應(yīng)寬度，此種布局挺常用，尤其是像后臺(tái)，大部分都是采用這種結(jié)構(gòu)，還比如像訂餐類(lèi)的，進(jìn)入商家的時(shí)候，會(huì)出現(xiàn)一堆飯的列表，左側(cè)是飯的分類(lèi)，右側(cè)是飯的列表等等。 最近學(xué)習(xí)了一種經(jīng)典布局，固定左側(cè)或右側(cè)的寬度，另一側(cè)自適應(yīng)寬度，此種布局挺常用，尤其是像后臺(tái)，大部分都是采用這種結(jié)構(gòu)，還比如像訂餐類(lèi)的APP，進(jìn)入商家的時(shí)候，會(huì)出現(xiàn)一堆飯的列表，...

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

  • css經(jīng)典布局之左側(cè)固定大小右側(cè)自動(dòng)適應(yīng)

    摘要：最近學(xué)習(xí)了一種經(jīng)典布局，固定左側(cè)或右側(cè)的寬度，另一側(cè)自適應(yīng)寬度，此種布局挺常用，尤其是像后臺(tái)，大部分都是采用這種結(jié)構(gòu)，還比如像訂餐類(lèi)的，進(jìn)入商家的時(shí)候，會(huì)出現(xiàn)一堆飯的列表，左側(cè)是飯的分類(lèi)，右側(cè)是飯的列表等等。 最近學(xué)習(xí)了一種經(jīng)典布局，固定左側(cè)或右側(cè)的寬度，另一側(cè)自適應(yīng)寬度，此種布局挺常用，尤其是像后臺(tái)，大部分都是采用這種結(jié)構(gòu)，還比如像訂餐類(lèi)的APP，進(jìn)入商家的時(shí)候，會(huì)出現(xiàn)一堆飯的列表，...

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

  • CSS布局十八般武藝都在這里了

    摘要：清單一些說(shuō)明注意文檔的書(shū)寫(xiě)順序，先寫(xiě)兩側(cè)欄，再寫(xiě)主面板，更換后則側(cè)欄會(huì)被擠到下一列圣杯布局和雙飛翼布局都會(huì)用到?？梢酝ㄟ^(guò)設(shè)置的屬性或使用雙飛翼布局避免問(wèn)題。雙飛翼布局不用設(shè)置相對(duì)布局，以及對(duì)應(yīng)的和值。 本文首發(fā)于知乎專(zhuān)欄：前端指南 CSS布局 布局是CSS中一個(gè)重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實(shí)現(xiàn)方式（包括傳統(tǒng)的...

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

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

0條評(píng)論

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