思路:使用display:flex实现页面效果
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<style>
.container {
height:100vh;
display:flex;
flex-direction:row;
}
.left {
width:70%;
background-color:red;
}
.right{
width:30%;
background-color:pink;
}
</style>
代码之中使用 flex-direction:row实现了左右两个盒子得水平排列,然后width占据百分比进行分割,这样页面就会根据浏览器窗口大小的变化实时的调整自身大小宽度