左边宽度固定右边自适应

1.左侧宽度固定左浮动,右侧设置margin-left为左侧宽度;

.box1 {
	width: 200px;
	height: 500px;
	background: #ff0;
	float: left;
}

.box2 {
	height: 500px;
	background: #f00;
	margin-left: 200px;
}

2.父级设置display:flex,左侧宽度固定,右侧flex为1;

.box {
	display: flex;
}

.box1 {
	width: 200px;
	height: 500px;
	background: #ff0;
}
.box2 {
    height: 500px;
	background: #f00;
	flex: 1;
}

3.左侧固定宽度并绝对定位脱离文档流,右侧设置margin-left;

.box1 {
	width: 200px;
	height: 500px;
	background: #ff0;
	position: absolute;
}

.box2 {
	height: 500px;
	background: #f00;
	margin-left: 200px;
}

4.左侧宽度固定且左浮动,右侧overflow:hidden;

.box1 {
	width: 200px;
	height: 500px;
	background: #ff0;
	float: left;
}

.box2 {
	height: 500px;
	background: #f00;
	overflow: hidden;
}

猜你喜欢

转载自blog.csdn.net/weixin_42217154/article/details/84937222