前端ABC运用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自适应在右侧