左侧固定，右侧自适应布局的两种实现方法

左侧固定，右侧自适应布局效果图

很多页面，特别是网站后台管理页面，不少采用左右布局。本文讲解左侧固定，右侧自适应布局的两种实现方法。

左侧固定200px宽，右侧自适应，中间间隔10px。

HTML:

<div class="parent">
    <div class="side"></div>
    <div class="mid"></div>
</div>

左侧固定，右侧自适应布局实现方法一：

左侧浮动，父盒子overflow:hidden（把塌陷撑开），右侧写margin-left：210px（因为浮动元素已经脱离文档流了）。

.parent{
    overflow:hidden;
}
.side{
    width:200px;
    height:200px;
    background-color:red;
    float:left;
}
.mid{
    width:100%;
    height:200px;
    background-color:blue;
    margin-left:210px;
}

左侧固定，右侧自适应布局实现方法二：

两个子div全都浮动，但是设置左边的浮动元素margin-right:-100%。主要解决浮动元素防错行的问题。 只要将后面元素margin-left:210px就完美没解决了。

.parent{
    overflow:hidden;
}
.side,.mid{
    float:left;
}
.side{
    width:200px;
    height:200px;
    background-color:red;
    margin-right:-100%;
}
.mid{
    width:100%;
    height:200px;
    background-color:blue;
    margin-left:210px;
}