這是面試中常問(wèn)的布局方式,周圍有同學(xué)面試時(shí)問(wèn)到了,那就寫寫小demo吧
方案一:float+overflow:hidden
//html
<body>
<div id = 'a'>haha</div>
<div id = 'b'>heihei</div>
</body>
//css
#a{
width:100px;
float:left;
border:1px solid blue;
}
#b{
overflow:hidden;
border:1px solid green;
}
效果:我們看到總寬度的變化不會(huì)影響左列寬度,右列自適應(yīng)
float+overflow:hidden
float+overflow:hidden
方案二:float+margin-left
//css
#a{
width:100px;
float:left;
border:1px solid blue;
}
#b{
margin-left:100px;
border:1px solid green;
}
效果和方案一相同
方案三:flex布局:父級(jí)元素display:flex,左列定寬,右列flex:1
//css
body{
display:flex;
}
#a{
width:100px;
border:1px solid blue;
}
#b{
flex:1;
border:1px solid green;
}
效果當(dāng)然也與方案一相同啦
