左侧固定，右侧自适应布局效果图
很多页面，特别是网站后台管理页面，不少采用左右布局。本文讲解左侧固定，右侧自适应布局的两种实现方法。
左侧固定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;
}
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3345.html
微信扫一扫 
支付宝扫一扫 