2種方法實現經典的左側固定寬度200px，右側自適應寬度的佈局

時間 2019-11-05

原文原文鏈接

今天去面試前端人員，隨即出了一個經典的佈局問題，即如標題所示。但是結果令我很驚訝，超過一半的人都沒答對，亦或是隻答對一半！在此記錄下用兩種方法，第一種普通的方法，第二種是利用flex佈局。前端

首先咱們假定頁面上已有下列元素：面試

<body >
    <div id="left" ></div>
    <div id="right"></div>    
</body>

第一種方法：float+margin-left佈局

這種方法是最簡單也是最容易想到的方法(至少在我看來)，請看以下CSS：flex

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的，在此就很少說了...code

第二種方法：display+flexit

使用第二種方法的人我更是沒見到，好吧，這可能須要多瞭解一些flex佈局的知識，那麼請看以下CSS：io

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的強大之處，而在面試中，沒有一我的使用這種方法....float

好了，以上就是兩種實現該佈局的方法了，或許有人說，還有第三種方法呢，position:absolute，left:200px...那這種方法就留給你們去思考啦！ D:)自適應

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。