css 实现一个div左边200px*200px 另一个div自适应在右侧

运用css,有四种方法可以实现
1.float
2.flex
3.table table-cell
4.calc

<!DOCTYPE html>
<html>
<head>
	<title>qdabc.cn</title>
</head>
<style type="text/css">
	.container{
		width: 800px;
		height: 200px;
		border: 1px solid red;
	}
	.left{
		width: 200px;
		height: 100%;
		background-color: gray;
	}
	.right{
		background-color:#dd00dd;
		height: 100%;
	}


	.floatleft{
		float: left;
	}

	.flex{
		display: flex;
	}

	.flexnone{
		flex: none;
	}

	.flex1{
		flex: 1;
	}

	.table{
		display: table;
	}
	.tablecell{
		display: table-cell;
	}
	
	.calleft{
		width: 200px;
		height: 100%;
		float: left;
		background: gray;
	}
	.calright{
		height:100%;
        background-color:red;
        float:right;
        width:calc(100% - 200px);
	}

</style>
<body>
利用float
<div class="container">
	<div class="floatleft left"></div>
	<div class="right"></div>
</div>

利用flex
<div class="container flex">
	<div class="left flexnone"></div>
	<div class="right flex1"></div>
</div>

利用table table-cell
<div class="container table">
	<div class="left tablecell"></div>
	<div class="right tablecell"></div>
</div>

利用calc
<div class="container">
	<div class="calleft"></div>
	<div class="calright"></div>
</div>

</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » css 实现一个div左边200px*200px 另一个div自适应在右侧

赞 (2)
分享到:更多 ()

发表评论 0