这是面试中常问的布局方式,周围有同学面试时问到了,那就写写小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;
}
效果:我们看到总宽度的变化不会影响左列宽度,右列自适应
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布局:父级元素display:flex,左列定宽,右列flex:1
//css
body{
display:flex;
}
#a{
width:100px;
border:1px solid blue;
}
#b{
flex:1;
border:1px solid green;
}
效果当然也与方案一相同啦
网友评论