一、
1. 左边div设置float:left 或者position: absolute 脱离文档流
2. 避免左边div遮住右边div,右边div设置margin-left:左边div的宽度
<style>
.left {
width: 300px;
height: 500px;
background-color: rgb(8, 167, 216);
float: left;
/* position: absolute; */
}
.right {
width: calc(100% - 300px);
height: 500px;
background-color: rgb(228, 204, 80);
margin-left: 300px;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
tip:calc可以动态计算宽高
二、
1. 左边div设置float:left 或者position: absolute 脱离文档流
2. 避免左边div遮住右边div,右边div设置overflow: hidden 触发 块级格式化上下文(BFC)
<style>
.left {
width: 300px;
height: 500px;
background-color: rgb(8, 167, 216);
float: left;
/* position: absolute; */
}
.right {
width: 300px;
height: 500px;
background-color: rgb(228, 204, 80);
overflow: hidden;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
三、flex布局
1. 给两个div添加父div并设置display: flex
2. 左div设置固定宽
3. 右div设置flex: 1,右div将会自动填充撑满父div的宽
tip:给右div设置宽度将不生效
<style>
.box {
display: flex;
}
.left {
width: 300px;
height: 500px;
background-color: rgb(8, 167, 216);
}
.right {
flex: 1;
height: 500px;
background-color: rgb(228, 204, 80);
}
</style>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
思想:固定一栏,对另一栏进行操作。本文固定左div,同理也可固定右div( float: right )。