方法1:float:left;margin-left:xxpx;
<style type="text/css">
.container{
width: 100%;
height: 500px;
}
.one{
width: 200px;
height: 100%;
float: left;
background-color:brown;
}
.two{
width: 100%;
height: 100%;
margin-left:200px;
background-color: cornflowerblue;
}
</style>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
方法2:父:position:relative;自适应块:position:absolute;left:xxpx;top:0px;
<style type="text/css">
.container{
width: 100%;
height: 500px;
position: relative;
}
.one{
width: 200px;
height: 100%;
background-color:brown;
}
.two{
width: 100%;
height: 100%;
position: absolute;
left: 200px;
top: 0;
background-color: cornflowerblue;
}
</style>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
方法3:flex布局,父:display:flex;自适应部分:flex:1;
<style type="text/css">
.container{
width: 100%;
height: 500px;
display: flex;
}
.one{
width: 200px;
height: 100%;
background-color:brown;
}
.two{
width: 100%;
height: 100%;
flex: 1;
background-color: cornflowerblue;
}
</style>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
方法4:表格布局,父:display:table;固定宽度子:width:xxpx;display:table-cell;自适应子:display:table-cell;无width
<style type="text/css">
.container{
width: 100%;
height: 500px;
display: table;
}
.one{
width: 200px;
height: 100%;
display: table-cell;
background-color:brown;
}
.two{
height: 100%;
display: table-cell;
background-color: cornflowerblue;
}
</style>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
方法5:左右两栏都float:left;左栏:width:xxpx;右边栏:width:calc(100% - xxpx);
<style type="text/css">
.container{
width: 100%;
height: 500px;
}
.one{
width: 200px;
height: 100%;
float: left;
background-color:brown;
}
.two{
height: 100%;
float: left;
width: calc(100% - 200px);/* 此处一定注意 !!!! 减号两边必须有空格*/
background-color: cornflowerblue;
}
</style>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
方法6:左右两元素都设置inline-block,右边元素宽度使用calc进行计算。但需要解决inline-block时,标签换行会渲染为一个空格换行符/空格间隙问题,解决方法其一:需要在父元素中添加display: table;word-spacing:-1em;
<style type="text/css">
.container{
width: 100%;
height: 500px;
display: table;
word-spacing:-1em;
}
.one{
width: 200px;
height: 100%;
display: inline-block;
background-color:brown;
}
.two{
height: 100%;
width: calc(100% - 200px);
display: inline-block;
background-color: cornflowerblue;
}
</style>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>