div的布局统一如下：

  1. <body>
  2.   <div class="wrap">
  3.     <div class="left"></div>
  4.     <div class="right"></div>
  5.   </div>
  6. </body>

css的基本设置统一如下：

  1.     * {
  2.       margin: ;
  3.     }
  4.     html,body {
  5.       width: %;
  6.       height: %;
  7.     }

第一种方式：左边的div向左浮动，右边的div的width为100%，margin-left值设置为左边div的宽度。

  1.     div.wrap {
  2.       width: %;
  3.       height: %;
  4.       background: #fefefe;
  5.     }
  6.     div.left {
  7.       float: left;
  8.       width: 300px;
  9.       height: %;
  10.       background: #eafeea;
  11.     }
  12.     div.right {
  13.       width: %;
  14.       height: %;
  15.       margin-left: 300px;
  16.       background: pink;
  17.     }

这里因为没有内容，所以height: 100%来撑开。 左边div在float之后，脱离文档流，右边元素width: 100%，是父元素的宽度减去子元素的padding和margin的剩下的宽度，所以刚好可以做到右边div的自适应。

 

第二种方式： 和第一种方式的思路一样，只是这次我们可以通过将父元素设置为 position: relative； 将左边的元素设置为 position: absolute； 并且left为0。右边div不变。

  1.     div.wrap {
  2.       width: %;
  3.       height: %;
  4.       background: #fefefe;
  5.       position: relative;
  6.     }
  7.     div.left {
  8.       width: 300px;
  9.       position: absolute;
  10.       left: ;
  11.       height: %;
  12.       background: #eafeea;
  13.     }
  14.     div.right {
  15.       width: %;
  16.       height: %;
  17.       margin-left: 300px;
  18.       background: pink;
  19.     }

第三种方式： 使用BFC方式，即将右边的div设置overflow: hidden；这样就可以出发BFC了，而BFC的规则就是不会和浮动元素重叠，如下：

  1.     div.wrap {
  2.       width: %;
  3.       height: %;
  4.       background: #fefefe;
  5.     }
  6.     div.left {
  7.       float: left;
  8.       width: 300px;
  9.       height: %;
  10.       background: #eafeea;
  11.     }
  12.     div.right {
  13.       height: %;
  14.       overflow: hidden;
  15.       background: pink;
  16.     }

注意到： 这里我们直接把右边的div添加了overflow:hidden； 然后又把width: 100%去掉，否则会出现问题。

第四种方式：左边固定宽度 float，右边width设置为100%， float: right，然后margin-right: -300px即可，通过margin负边距，我们就可以达到同样的效果：

  1.     div.wrap {
  2.       width: %;
  3.       height: %;
  4.       background: #fefefe;
  5.     }
  6.     div.left {
  7.       float: left;
  8.       width: 300px;
  9.       height: %;
  10.       background: #eafeea;
  11.     }
  12.     div.right {
  13.       width: %;
  14.       float: right;
  15.       margin-right: -300px;
  16.       height: %;
  17.       background: pink;
  18.     }

记住： margin负边距影响的永远都是文档流，文档流会认为其减小了，但是实际上并没有减小。

第五种方式： 使用flex布局。 包裹层使用flex，内部就是弹性布局了，不用设置。

  1.     div.wrap {
  2.       display: flex;
  3.       width: %;
  4.       height: %;
  5.       background: #fefefe;
  6.     }
  7.     div.left {
  8.       width: 300px;
  9.       height: %;
  10.       background: #eafeea;
  11.     }
  12.     div.right {
  13.       width: %;
  14.       height: %;
  15.       background: pink;
  16.     }

即左边的div仅仅设置width:300px，右边的div设置为width：100%即可。

 

第六种方式： 左右两边全部使用绝对定位，左边设定宽度300px，右边100%。

  1.     div.wrap {
  2.       position: relative;
  3.       width: %;
  4.       height: %;
  5.       background: #fefefe;
  6.     }
  7.     div.left {
  8.       position: absolute;
  9.       left: ;
  10.       top: ;
  11.       width: 300px;
  12.       height: %;
  13.       background: #eafeea;
  14.     }
  15.     div.right {
  16.       position: absolute;
  17.       top: ;
  18.       left: 300px;
  19.       width: %;
  20.       height: %;
  21.       background: pink;
  22.     }

这种方法也是轻松实现。

第七种方式： 使用table布局。 包裹元素设置为 display: table； 子元素设置为 display: table-cell; 然后再设置好左边元素的宽度，右边元素不需要设置宽度。 并且是等高布局。

  1.     div.wrap {
  2.       display: table;
  3.       width: %;
  4.       height: %;
  5.       background: #fefefe;
  6.     }
  7.     div.left {
  8.       display: table-cell;
  9.       width: 300px;
  10.       height: %;
  11.       background: #eafeea;
  12.     }
  13.     div.right {
  14.       display: table-cell;
  15.       height: %;
  16.       background: pink;
  17.     }

效果如下：

css网页布局 --- 左边固定，右边自适应的更多相关文章

  1. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  2. HTML布局之左右结构，左边固定右边跟据父元素自适应

    HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管 ...

  3. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  4. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  5. 前端学习笔记之CSS网页布局

    CSS网页布局   阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...

  6. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

  7. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  8. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  9. CSS网页布局中易犯的30个小错误

    即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...

随机推荐

  1. Spring boot变量的初始化顺序

    起因是Spring建议”总是在您的bean中使用构造函数建立依赖注入.总是使用断言强制依赖”,而且之前用@Autowired时idea总是给警告,于是全部改成了构造器注入,运行时发生了循环注入,于是找 ...

  2. spring+hibernate 整合异常 Class 'org.apache.commons.dbcp.BasicDataSource' not found

    解决方法 添加 commons-dbcp.jar和commons-pool.jar包

  3. Object-C中 - self 和super 的含义

    //super:父类         //self:自己              //自己理解         //以MobilePhone为例,父类为NSObject         //在类方法 ...

  4. POJ1066线段交点

    POJ1066 题意:给出一个100*100的正方形区域,通过若干连接区域边界的线段将正方形区域分割为多个不规则多边形小区域,然后给出宝藏位置,要求从区域外部开辟到宝藏所在位置的一条路径,使得开辟路径 ...

  5. Java中取两位小数

    请参考下面函数: private String getFormated(String s){        float f=Float.parseFloat(s);        java.text. ...

  6. Tmux入门教程

      对于程序员来说效率绝对是最重要的,那我们今天就来介绍下一个能极大提高工作效率的软件Tmux.   Tmux 是一个工具,用于在一个终端窗口中运行多个终端会话.不仅如此,你还可以通过 Tmux 使终 ...

  7. 使用hadoop-daemon.sh 启动bootstrapStandby nameNode异常

    使用hadoop-daemon.sh 启动bootstrapStandby nameNode异常 启动bootstrapStandby nameNode时,直接通过ssh 过去执行该命令,一直无法成功 ...

  8. 深入理解Aspnet Core之Identity(3)

    主题 账户管理一个比较常见的功能就是密码强度策略,Identity已经内置了一个通用的可配置的策略,我们一般情况下可以直接拿来用即可.本篇我会介绍一些Identity内置的密码策略类:Password ...

  9. 零开始：NetCore项目权限管理系统：登录授权

    喜欢NetCore的朋友,欢迎加群QQ:86594082 源码地址:https://github.com/feiyit/SoaProJect 管理员的模型 namespace FytSoa.Core. ...

  10. 关于Select选中问题

    jquery根据text选中option的问题: 网上找了好多,但发现因为jquery版本问题,很多并不能用.   最后成功了,写法如下:   $('#shop option:contains(' + ...