資訊專欄INFORMATION COLUMN
摘要：今天去面試前端人員，隨即出了一個經典的布局問題，即如標題所示?？墒墙Y果令我很驚訝，超過一半的人都沒答對，亦或是只答對一半在此記錄下用兩種方法，第一種普通的方法，第二種是利用布局。
??????今天去面試前端人員，隨即出了一個經典的布局問題，即如標題所示?？墒墙Y果令我很驚訝，超過一半的人都沒答對，亦或是只答對一半！在此記錄下用兩種方法，第一種普通的方法，第二種是利用flex布局。
首先我們假定頁面上已有下列元素：
第一種方法：float+margin-left
???這種方法是最簡單也是最容易想到的方法(至少在我看來)，請看如下CSS：
div{
height:200px;
}
#left{
float: left;
width: 200px;
background: blue;
}
#right{
margin-left: 200px;
background: red;
}
???加上高度和背景是方便查看效果，將左側div浮動，設置寬200px，右側的div設置一個左外邊距margin-left等于左側寬度，沒了！如此簡單即可實現，可是在實際中，我看到的結果是有不寫float直接margin-left的，也有寫了float不寫margin-left的，在此就不多說了...
第二種方法：display+flex
???使用第二種方法的人我更是沒見到，好吧，這可能需要多了解一些flex布局的知識，那么請看如下CSS：
body{
display: flex;
flex-flow: row;
}
#left{
width: 200px;
background: blue;
}
#right{
flex: 1;
background: red;
}
???先來解釋下含義，首先將body的display為flex，讓body遵從flex布局，并且設置flex-flow為row，橫向的，然后就是左側div寬度200px，右側div的flex:1，這里很關鍵，1會將剩余寬度全部占滿，即如果左側寬度發生改變的話，右側能夠自適應，而不用像第一種方法那樣margin-left也要修改。這就是display flex的強大之處，而在面試中，沒有一個人使用這種方法....
???好了，以上就是兩種實現該布局的方法了，或許有人說，還有第三種方法呢，position:absolute，left:200px...那這種方法就留給大家去思考啦！ D:)
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111827.html
摘要：最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的，進入商家的時候，會出現一堆飯的列表，左側是飯的分類，右側是飯的列表等等。 最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的APP，進入商家的時候，會出現一堆飯的列表，...
摘要：最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的，進入商家的時候，會出現一堆飯的列表，左側是飯的分類，右側是飯的列表等等。 最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的APP，進入商家的時候，會出現一堆飯的列表，...
摘要：最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的，進入商家的時候，會出現一堆飯的列表，左側是飯的分類，右側是飯的列表等等。 最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的APP，進入商家的時候，會出現一堆飯的列表，...
摘要：清單一些說明注意文檔的書寫順序，先寫兩側欄，再寫主面板，更換后則側欄會被擠到下一列圣杯布局和雙飛翼布局都會用到?？梢酝ㄟ^設置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設置相對布局，以及對應的和值。 本文首發于知乎專欄：前端指南 CSS布局 布局是CSS中一個重要部分，本文總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的...
閱讀 2584·2023-04-25 20:50
閱讀 3929·2023-04-25 18:45
閱讀 2213·2021-11-17 17:00
閱讀 3323·2021-10-08 10:05
閱讀 3073·2019-08-30 15:55
閱讀 3487·2019-08-30 15:44
閱讀 2355·2019-08-29 13:51
閱讀 1111·2019-08-29 12:47
