1. 中国网页设计首页
  2. 教程
  3. 网页设计

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

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

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

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

左侧固定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