☊【实现要求】：CSS实现左边固定，右边自适应父容器宽度的两栏布局。

  1. <body>
  2.     <div class="left"></div>
  3.     <div class="main"></div>
  4. </body>

√【实现】：

  1. // html 和 body 的高度默认为0，因此要先设置为100%，并且清除默认样式（margin:0; padding:0）
  2. html,body {
  3.     /*width: 100%;*/
  4.     height: 100%;   // html,body 默认高度为 0
  5.     margin: 0;
  6.     padding: 0;
  7. }
  9. .left {
  10.     width: 200px;
  11.     height: 100%;	// 撑满整个页面高度
  12.     float: left;	// 左边浮动
  13.     background: orange;
  14. }
  16. .main {
  17.     height: 100%;	// 撑满整个页面高度
  18.     margin-left: 200px;	//距左边距200px
  19.     background: green;
  20. }

♫ 注意： 如果浮动非替换元素，则要指明一个明确的宽度；否则，它们会尽可能地窄。

假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

实现效果：

☊【实现要求】： CSS实现右侧宽度为200px，左侧自动扩展的两栏布局。

  1. <body>
  2.     <div class="right"></div> <!-- 注意用 float 方式, 该行必须写在 main 上面 -->
  3.     <div class="main"></div>
  4. </body>

√【实现】：

  1. body, html {
  2.     height: 100%;
  3.     /*width: 100%;*/
  4.     margin: 0;
  5.     padding: 0;
  6. }
  8. .main {
  9.     height: 100%;
  10.     margin-right: 200px;
  11.     background: green;
  12. }
  14. .right {
  15.     width: 200px;
  16.     height: 100%;
  17.     float: right;
  18.     background: orange;
  19. }

☊【实现要求】：两栏布局，左边固定，右边自适应

  1. <div class="demo3">
  2.     <div class="col-1"></div>
  3.     <div class="col-2"></div>
  4. </div>

√【实现】：

① float 布局

  1. .demo3 {
  2.     .col-1 {
  3.     	width: 150px;
  4.     	float: left;	// 脱离文档流
  5.     }
  6.     .col-2 {
  7.     	// 不需要设置 margin-left, float会形成包围文字效果，虽然col-2的左边部分被col-1覆盖
  8.     }
  9. }

如果设置 margin-left: 170px; 则 col-2 会向右偏移:

给 col-2 添加 overflow: hidden;，则不需要设置 margin-left，自动偏右：

② position: absolute; 左边元素相对于父元素绝对定位

*float 和 position:absolute; 都脱离文档流

  1. .demo3 {
  2.     position: relative;	// 定位父元素
  4.     .col-1 {
  5.     	width: 150px;
  6.     	position: absolute;	// 脱离文档流
  7.     }
  8.     .col-2 {
  9.     	margin-left: 150px;	// absolute不会形成文字环绕效果，因此col-2会向上浮,
  10.     						// 左边部分（包括文字）会隐藏在col-1下面，需要设置 margin-left
  11.     }
  12. }

若 col-2 不设置 margin-left:

设置 margin-left 后：

注意：这种情况下，对 col-2 使用 overflow: hidden 不起作用，只能通过偏移量来进行定位

③ flex 布局

  1. .demo3 {
  2.     display: flex;
  3.     display: -webkit-flex;
  5.     .col-1 {
  6.     	width: 150px;
  7.     }
  8.     .col-2 {
  9.     	flex: 1;	// flex:1; 自动撑满剩余宽度
  10.     	-webkit-flex: 1;
  11.     }
  12. }

CSS 实现：两栏布局（一边固定，一边自适应）的更多相关文章

  1. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  2. CSS实现两栏布局

    写在前面 两栏布局是指页面布局由主栏和边栏组成,是许多网页的布局方式,一般使用CSS去实现两栏布局. 实现两栏布局的方式有多种,这里采用四种比较常见的实现方式.主要是流体布局(liquid layou ...

  3. css实现两栏布局，左侧固定宽，右侧自适应的7中方法

    一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...

  4. css的两栏布局

    经典的实现左边固定宽度,右边宽度自适应的几种方法 利用float和margin-left属性(margin-left的值可以稍稍大于或者等于.left的宽度) .left{ width: 30px; ...

  5. CSS 实现左侧固定，右侧自适应两栏布局的方法

    "左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...

  6. 七种CSS左侧固定,右侧自适应两栏布局

    一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...

  7. 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？

    在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...

  8. css布局 - 工作中常见的两栏布局案例及分析

    突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法.临时就在我经常浏览的网站上抓的相对应的截图.(以后看到其他类型的我再补充) 既然截了图,咱们就直接看人家使用的布局方式,毕 ...

  9. css两栏布局、圣杯布局、双飞翼布局

    最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...

随机推荐

  1. 工程技巧Linux上建立工程项目

    程序中用到的核心代码用库的形式进行封装,并且给出示例程序,下面给出一个程序文件夹的建立脚本. 如运行sh MakeProject.sh  PersonNameIdentification PNILib ...

  2. "LC.exe" exited with code -1 错误

    当打开一个VS程序时出现"LC.exe" exited with code -1错误,解决方法是: 删除licenses.licx文件即可

  3. svn resolve/merge

    svn merge http://svn.a.com/branches/20150129_168954_sales-impr_1 svn resolve --accept working web/sr ...

  4. 10款优秀Vim插件帮你打造完美IDE

    导读 如果你稍微写过一点代码,就能知道“集成开发环境”(IDE)是多么的便利.不管是Java.C还是Python,当IDE会帮你检查语法.后台编译,或者自动导入你需要的库时,写代码就变得容易许多.另外 ...

  5. iOS产品开发流程

    iOS产品开发流程 a.产品经理做需求调研,确定产品需求,编写需求文档 b.产品人员完成产品原型 c.产品经理召开会议(产品,UI,UE,开发,测试,服务器) d.设计人员根据原型设计出一系列UI界面 ...

  6. HDU 4890 One to Four（2014 Multi-University Training Contest 3）

    题意:给定一个长方形网格,要把它切成完全相同4个部分(这里完全相同指可以旋转平移后能重叠).把4个重叠后每个网格对应有四个数字相加,得到一种方案,所有格子中和最小就是该种方案的值,在多种方案中,最后问 ...

  7. Linux gcc编译(动态库，静态库)

    1. linux 库路径: /lib , /usr/lib , /usr/local/lib 2.linux 编译静态库 a.编写源文件vi pr1.c void print1(){    print ...

  8. jsp中普通按钮如何提交表单

    jsp中普通按钮如何提交表单方法1: <form action = "提交的地址">         <input type="submit" ...

  9. [C/C++]C/C++相关网站

    1.http://en.cppreference.com What is the purpose of this site? Our goal is to provide programmers wi ...

  10. Ad Muncher 宣布免费

    Windows平台广告过滤软件Ad Muncher宣布免费 详见:http://www.admuncher.com/free 下载:http://www.admuncher.com/static/fi ...