大家都知道好多网站都是左右布局的，很多公司在笔试和面试环节也常常问这个问题。一个去网易的师兄说14年腾讯面试的时候问过这个问题，网易在笔试和面试时候也问过这个问题，还有很多互联网公司也都涉及到这个问题。下面是我的一些小经验，疏漏之处还望大家体谅。

如果不用纯CSS解决此问题的话，我们可以先固定左侧DIV宽度为：100px，然后用JS取得当前浏览器宽度，再减去100px，然后赋值给右侧DIV宽度即可。这样就愉快的解决了，右侧的宽度就是自适应的了。

当然如果不是固定左侧DIV宽度为：100px的话，我们也可以用百分比设置左右侧DIV的宽度，也是自适应的。

那究竟该如何用CSS来解决这个问题呢？

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

CSS position 属性：

static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

        relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
        absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
        fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
        关于浮动，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。关于负边距的介绍在 http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 里有非常详细的介绍。下面是三种用CSS解决这个问题的方法，第一种是用绝对定位实现的，第二种是用浮动来实现的，第三种是用负边距来实现的。以下是具体代码和显示效果：
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

     </head>

     <body>

         <!--1.用绝对定位布局示例-->

         <div style="width: 100px;height: 100px;background-color: red;position: absolute;">左侧宽度100px</div>

         <div style="width: auto; height: 100px;background-color:blue;">*******右侧宽度自适应*******</div>

         <div style="width: 100px;height: 100px;background-color: grey;position: absolute;">左侧宽度100px</div>

         <div style="width: auto; height: 100px;background-color:yellow;margin-left:100px ;">*******右侧宽度自适应*******</div>

         <!--2.用 浮动 布局示例-->

         <div style="width: 100px;height: 100px;background-color: yellowgreen;float: left;">左侧宽度100px</div>

         <div style="width: auto; height: 100px;background-color:lightgrey;">*******右侧宽度自适应*******</div>

         <!-- 3.利用负边距布局示例-->

         <div style="width:100px;height:100px;background-color:brown;position:relative;float:left;margin-right:-100px;">左侧宽度100px

         </div>

         <div style="float:right;width:100%;height: 100px;">

             <div style="margin-left:100px;height:100px;background-color: wheat;">

                 *******右侧宽度自适应*******

             </div>

         </div>

     </body>

 </html>

由以上实现可以看出，在用绝对定位时，由于其在文档流中已经不存在，那么我们就很容易理解为什么第一实例里面的右侧DIV被左侧DIV遮挡了。所以，绝对定位时要注意设置margin值。

如何用纯CSS布局两列，一列固定宽度，另一列自适应？的更多相关文章

  1. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  2. css布局 - 两栏自适应布局的几种实现方法汇总

    这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...

  3. 纯css实现两列等高

    <!doctype html> <html> <head> <meta /> <title>Title</title> < ...

  4. CSS布局 两列布局之单列定宽,单列自适应布局思路

    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...

  5. 关于纯css布局的概况

    用一些常用的手法来表现感情或者论证问题,这在XHTML中就是用特定的元素来完成一些常见的信息组织.下面就是信息组织形式与元素的对应列表. img 作为内容的图片是一定要放到img里面的,这没有更好的选 ...

  6. css布局: 两栏 自适应高度

    只使用css实现 有两种方式, 一种是通过相对定位,再绝对定位获取父亲元素的高度, 一种是通过margin-bottom:-999em;padding-bottom: 999em; 父亲元素超出隐藏 ...

  7. 如何用纯 CSS 为母亲节创作一颗像素画风格的爱心

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LmrZVX 可交互视频教 ...

  8. 如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZoxjXm 可交互视频教 ...

  9. 如何用纯 CSS 创作条形图，不用任何图表库

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 在线演示 https://codepen.io/zhang-ou/pen/XqzGLp 可交互视频教 ...

随机推荐

  1. 21天实战caffe笔记_第一天

    1 深度学习术语 深度学习常用名词:有监督学习.无监督学习.训练数据集.测试数据集.过拟合.泛化.惩罚值(损失loss); 机器自动学习所需三份数据:训练集(机器学习的样例),验证集(机器学习阶段,用 ...

  2. C++ public private protect 继承关系(链接)

    基础链接 总结:  public继承基类成员访问权限没有变化; protected继承基类public和protected权限变为protected,基类private不变. private继承基类p ...

  3. Linux可执行文件后缀问题

    一般来说,可执行文件没有扩展名. Linux不根据扩展名判断文件类型,而是根据文件的内容来判断.所以扩展名的作用是帮助人来识别文件,对于Linux系统本身来说没有什么用处. .sh结尾表示是shell ...

  4. 题解【CF103D Time to Raid Cowavans】

    Description 给一个序列 \(a\) ,\(m\) 次询问,每次询问给出 \(t, k\) .求 \(a_t + a_{t+k}+a_{t+2k}+\cdots+a_{t+pk}\) 其中 ...

  5. Nginx Upstream Keepalive 分析 保持长连接

    Nginx Upstream长连接由upstream模式下的keepalive指令控制,并指定可用于长连接的连接数,配置样例如下: upstream http_backend {     server ...

  6. winscp以命令行方式同步服务器数据到PC机磁盘上

    目前服务器上每日会产生备份文件,需要使用winscp工具把备份同步到本地PC机硬盘上.平时都是图形界面用鼠标点击方式来同步的,效率低下,因此编写了winscp自动同步脚本,并加入到计划任务中定时自动运 ...

  7. python3 安装MySQLdb及无法打开mysql.h问题解决（win7 ）

    在Flask中要连接mysql数据库,需要安装flask-mysqldb. pip install flask-mysqldb 用pip安装MySQLdb 中遇到如下问题,折腾半天之久,多方尝试,终搞 ...

  8. [Java] 理解JVM之一：工作机制及基本结构

    一.基本结构 类加载器:在 JVM 启动时或在类运行时需要将类的字节码信息加载到 JVM 内存区域中. 执行引擎:负责执行字节码信息中包含的字节码指令,相当于实际机器上的 CPU. 内存区域:也被称为 ...

  9. java反射机制的理解

    反射机制是什么概念?大多都有介绍,指的是程序在运行状态中,能够加载一个只有类名的类,加载完之后会在堆上产生一个Class对象.通过这个 Class对象可以获得类的属性.方法和其他类信息.之前对反射的应 ...

  10. Bittersweet——NOIP2018 游记

    p { font-size: 16px; line-height: 1.5em; } blockquote { font-family: 'Times New Roman', 楷体; text-ali ...