页面结构html
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
第一种方式：float
<style>
.left{
float: left;
background: olive;
width:150px;
height: 300px;
}
.right{
overflow: hidden;
background: #df0;
height: 300px;
}
</style>
第二种方式：flex
.container{display: flex;}
.left{
flex:none;
background: olive;
width:150px;
height: 300px;
}
.right{
flex:1;
background: #df0;
height: 300px;
}
展示效果，两种都是一样的
实际展示效果
当然还有别的很多实现方式，在此只记录两种常用的够用就行。
网友评论