方法一: flex布局
本人将flex布局放在第一位,是个人推荐, 没有浮动,让页面布局更为稳定。
<style>
#d1{
width:100%;
display:flex; /*flex布局*/
}
.dz{
background: red;
width:200px;
height: 200px;
}
.dx{
flex:1; /*flex:1*/
height: 200px;
background: yellow;
}
</style>
<div id="d1">
<div class="dz"></div>
<div class="dx"></div>
</div>
方法二:css的计算函数
<style>
.wrap{
width:1000px;
height:400px;
border:1px solid red;
}
.left{
width:200px;
height:100%;
background:gray;
float:left;
}
.right{
height:100%;
background:green;
float:right;
/*计算函数 calc()*/
width:calc(100%-200px);
}
</style>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
方法三:外边距法
<style>
.wrap{
width:1000px;
height:400px;
border:1px solid red;
}
.left{
float:left;
width:200px;
border:1px solid red;
height:100%;
background:gray;
}
.right{
height:100%;
border:1px solid blue;
width:auto;
background:green;
margin-left:200px; /*使用外边距推开*/
}
</style>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>