两列布局（一列不定，一列自适应）
2019-10-17 本文已影响0人
蜗牛和曼巴
02.jpg
03.jpg
方法一：float+overflow
<div class="box">
<div class="left">一列不定</div>
<div class="right">一列自适应</div>
</div>
<style>
.left{
margin-right: 10px;
float: left; /*只设置浮动,不设宽度*/
height: 500px;
background-color: #f00;
}
.right{
overflow: hidden; /*触发bfc*/
height: 500px;
background-color: #0f0;
}
</style>
方法二：flex
<body>
<div class="box">
<div class="left">一列不定321323232</div>
<div class="right">一列自适应</div>
</div>
</body>
<style>
.box{
display: flex
}
.left { /*不设宽度*/
/* margin-right: 10px; */
height: 500px;
background-color: #f00;
}
.right {
height: 500px;
background-color: #0f0;
flex: 1; /*均分#parent剩余的部分*/
}
</style>
