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

江山如画 • 2019年3月10日下午7:14 • 网页设计 • 阅读 10056

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

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

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

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

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

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

99%的人还看了以下文章

9个排版设计原则！ – 优设小课堂

新手必看：如何制作网页

网页制作实战项目六：中融宝企业网站制作

如何给节日主题、活动主题做设计

两天入门React+ Node，全栈工程师培训教程（精）

接到一个网站开发项目怎么去完成？—网站的开发流程

发表回复