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

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

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

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

左侧固定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%的人还看了以下文章

  • 如何提升设计价值——方法篇

    设计≠艺术,设计从诞生之初就是为“解决问题”而存在。在体验设计场景,如果业务方是“需求提出者”,那产品经理和设计师就是从不同视角切入的“问题解决者”,而用户既是“需求源头”,又是“方案验证者”和最终“价值创造者”。下面我们详细解读设计价值与业务/用户/产品三方的关系.

    2023年1月16日 网页设计
    5400
  • 网页制作实战项目七:毫州文化旅游公司

    【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 毫州文化旅游公司 【上机目的】 1 、掌握网页布局的方法和技巧 2 、掌握HTML及CSS的使用 3、掌握行为的使用 4、培养团队意识和协作精神 【上机重点】 1 、网页布局 2 、行为的使用 3 、HTML及CSS的使用 【上机难点】 1、导航栏制作 2、CSS的定义和使用 【上机教学…

    2018年5月24日 网页设计
    4.5K0
  • 网页设计师必须知道的八大前端核心知识

    前端入门核心知识点 浏览器 Web标准:结构标准(HTML)、表现标准(CSS)、行为标准(JS) 浏览器分为两部分:渲染引擎(即:浏览器内核)、JS 引擎 浏览器的工作原理:重绘和重排、V8引擎 App的WebView容器,相当于浏览器,可以内嵌H5网页 HTML5 语义化标签:<header>、<article> 、<foo…

    2023年1月18日
    4120
  • 以文字为主题的海报如何进行版式设计

    豪斯课堂又一力作,耗时3个月。 让人受益匪浅的主题设计教程,版式调整下~!主体立刻突现!赞!把之前设计的一些迷惑的地方都给找出来了。 网友评论: 感触大发,突然就有了灵感!!! 完全的干货,干的拧不出水,看的时候非常感动,不禁在想楼主为此篇教程到底做了多少努力,看完之后有种肃然起敬的感觉。 非常好,理解很容易。最后修改一些同学的图片,我觉得真是大神,修改后的…

    2021年11月25日
    1.5K0
  • web前端开发需要哪些技能?

    做WEB前端开发需要掌握哪些知识和技能? 中国网页设计通过对大型软件企业及IT培训机构(Oracle)的调研,把web前端开发需要的技能点列举如下。 HTML HTML简介 HTMl结构 HTML常用标签 HTML框架 HTML表格标签 HTML表单 HTML多媒体 CSS css简介 css的基本使用 css选择器 css常用样式属设置 CSS定位与DIV…

    2018年7月17日
    1.9K0
  • Table布局 VS Div+CSS布局,选哪个?

    Table布局 和 Div+CSS布局的争论,过了7-8年了,今天看到一篇文章《为什么我们不建议用Table布局》,又想发表下自己的见解,供初学网页制作的新手参考。 《为什么我们不建议用Table布局》节选: Table要比其它html标记占更多的字节。 (延迟下载时间,占用服务器更多的流量资源。) Tablle会阻挡浏览器渲染引擎的渲染顺序。 (会延迟页面…

    2018年12月21日
    2.6K0

发表回复

登录后才能评论