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

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

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

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

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

(1)
江山如画的头像江山如画管理团队
上一篇 2019年3月7日 下午12:30
下一篇 2019年3月10日 下午7:33

99%的人还看了以下文章

  • 绝美!9种最有意境的蓝色

    蓝色既代表着忧郁,又代表着温柔,它和白色混合之后,还能体现柔顺、淡雅、浪漫的氛围,像天空的色彩~蓝的种类也有很多,克莱因蓝是备受设计师喜爱的一种,也是最经典的一种,而且蓝色是最具凉爽、清新、专业的颜色,今天125建站网给大家分享9种不同的蓝色,你更喜欢哪一种呢?

    2023年1月20日 网页设计
    1.4K0
  • 网页制作实战项目六:中融宝企业网站制作

    【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 中融宝企业网站制作 【上机目的】 1 、掌握网页布局的方法和技巧 2 、掌握HTML及CSS的使用 3、掌握表单及表单元素的使用 4、培养团队意识和协作精神 【上机重点】 1 、网页布局 2 、表单制作 3 、HTML及CSS的使用 【上机难点】 1、网页布局 2、CSS的定义和使用 【…

    2018年5月17日 网页设计
    7.6K1
  • 网站设计的七个步骤

    一般初学者经过短暂的学习就可以学会制作网页,于是他们认为网页制作非常简单,就匆匆忙忙制作自己的网站,可是做出来之后与别人一比,才发现自己的网站非常粗糙,这是为什么呢?常言道:“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样,它是一个系统工程,有自己特定的工作流程,你只有遵循这个步骤,按部就班地一步步来,才能设计出一个满意的网站。 初学网页制作从这里开始 …

    2020年6月13日
    3.8K0
  • 企业做网站选择定制开发,还是网上在线模板建站好?

    不少企业老板,要做网站,总爱先问做网站多少钱? 在《做个企业网站多少钱?》一文中,我们讲解了做网站,先要明白,价格和价值的关系,只看价格不比质量,不看实际给企业能带来多大价值的网站都是没有什么用处的,看似便宜,实际多花了钱,后期还要重做,总起来花的钱比原来还要多。想花一千的价格,还要求网站页面漂亮,功能完善,用户体验及排名都要好,这是不现实的。 企业做网站选…

    2018年12月17日
    2.8K0
  • 网页设计之前端开发工具和学习资源大全(精)

    前端文档 MDN 官方文档:https://developer.mozilla.org/zh-CN/docs/Web 前端社区 GitHub stackoverflow 掘金 JS 学习资源 现代 JavaScript 教程:https://zh.javascript.info/ 阮一峰 JS教程:https://wangdoc.com/javascript…

    2023年1月18日
    2.2K0
  • 快速找到海报设计中存在的版式问题

    通过海报设计实例,分析海报设计存在的问题,引导如何重新设计修改。从实战中理解所学的设计理论,活学活用。

    2018年7月9日
    9.3K0

发表回复

登录后才能评论