常见自适应布局

常见自适应布局

<div class="box">
	<div class="left"></div>
	<div class="right"></div>
</div>

左侧固定宽度，右侧自适应布局

方法一：

左侧盒子使用float浮动，固定宽度，右侧盒子设置margin-left控制与左侧的距离：

.left{
    width: 200px;
    float: left;
    background-color: skyblue;
}
.right{
    background-color: yellow;
    margin-left: 200px;
}

方法二：

左侧盒子使用绝对定位absolute；固定宽度，右侧盒子设置margin-left控制与左侧的距离：

.left{
    width: 200px;
    background-color: skyblue;
    position: absolute;
    left: 0;
}
.right{
    background-color: yellow;
    margin-left: 200px;
}

左侧自适应，右侧固定宽度

方法一：

左侧盒子左浮动，margin-right为负值，值为右边距==右侧层的宽度的负值（左侧撑开，使得两个盒子共行）， 右侧盒子右浮动，固定宽度

.left{
    float: left;
    background-color: skyblue;
    margin-right: -200px;
    width: 100%;
}
.right{
    width: 200px;
    float: right;
    background-color: yellow;
}

方法二：

左侧右侧都使用绝对定位，右侧固定宽度，父级设置相对定位：

.box{
    position: relative;
}
.left{
    position: absolute;
    left: 0;
    right: 200px;
    width: auto;
    background-color: skyblue;
}
.right{
    width: 200px;
    position: absolute;
    right: 0;
    background-color: yellow;
}

左右两侧宽度固定，中间自适应

<div class="box">
    <div class="center"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>

.left,.center,.right{
    float: left;
}
.center{
    width: 100%;
    background-color: greenyellow;
}
.left{
    width: 200px;
    background-color: skyblue;
    margin-left: -100%;
}
.right{
    width: 300px;
    margin-left: -300px;
    background-color: yellow;
}