最近在百度 IFE 训练营中看见的一道题目：

用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 

个人总结出如下三种实现思路：

  1. 通过绝对定位实现

See the Pen absolute-two-column by xal821792703 (@honoka) on CodePen.

注意点如下：

    • 需要套一个“positioned”的父元素
    • div-a 绝对定位，并将位置调整为浏览器左上角
    • div-b margin-left 属性值为 div-a 的宽度（因为 div-a 绝对定位已经脱离文档流，故不设定为 div-a 宽度的话，会相互覆盖）
    • div-c 绝对定位并将位置调整为正下方
    • 需要自适应的 div 均设定宽度为100%

　　2. 通过浮动实现

See the Pen float-two-column by xal821792703 (@honoka) on CodePen.

注意点如下：

    • div-a 设定为左浮动
    • div-b 与上面一样需要将 margin-left 属性值设为 div-a 的宽度，原因同上，浮动也会脱离文档流
    • div-c 最好清除浮动，避免浮动的影响

3. 通过 BFC 规则实现

See the Pen bfc-two-column by xal821792703 (@honoka) on CodePen.

此处便不花大量篇幅介绍 BFC 了，可以参见下面两篇博文：

深入理解BFC和Margin Collapse

CSS之BFC详解

简而言之，BFC 可以帮助我们解决布局中左边元素脱离文档流后，右边元素的左外边距会触碰到包含块容器的左外边框的问题，就像下图：

现在我们仅需注意将 div-b 设定为 BFC 元素即可。

以上便是个人总结出的三种两列布局方法，源代码已同步至个人 repo，欢迎参考交流（笑）

CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局的更多相关文章

  1. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  2. react native listview 一个有用的属性，用作两列布局

    contentContainerStyle:设置listview包裹内容的属性 <ListView contentContainerStyle={{flexDirection:'row',fle ...

  3. css布局之两列布局

    我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度 1.自适应两列布局 <!DOCTYPE html> <html lang="en"&g ...

  4. CSS布局——横向两列布局

    1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...

  5. css两列布局之基于BFC规则实现

    css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...

  6. 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局

    一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...

  7. CSS两列布局的N种实现

    一.什么是两列布局 两列布局分为两种,一种是左侧定宽.右侧自适应,另一种是两列都自适应(即左侧宽度由子元素决定,右侧补齐剩余空间).在CSS面试题里面属于常考题,也是一个前端开发工程师必须掌握的技能, ...

  8. css之页面两列布局

    两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...

  9. css两列布局，一边固定宽度，另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

随机推荐

  1. NetBean 远程开发的好文1 --> NetBeans的远程Linux C开发实践

    from:  http://blog.csdn.net/jacktan/article/details/9268535 一直以来总觉得NetBeans生活在Eclipse的阴影下,同样做为一款不错的基 ...

  2. UVa 10192 - Vacation &amp; UVa 10066 The Twin Towers ( LCS 最长公共子串)

    链接:UVa 10192 题意:给定两个字符串.求最长公共子串的长度 思路:这个是最长公共子串的直接应用 #include<stdio.h> #include<string.h> ...

  3. Elasticsearch 基础使用

    使用 cURL 执行 REST 命令 可以对 Elasticsearch 发出 cURL 请求,这样很容易从命令行 shell 体验该框架. “Elasticsearch 是无模式的.它可以接受您提供 ...

  4. [Functional Programming] Compose Simple State ADT Transitions into One Complex Transaction

    State is a lazy datatype and as such we can combine many simple transitions into one very complex on ...

  5. C#如何改变字符串编码

    public string UTF8ToGB2312(string str)        {            try            {                    Encod ...

  6. mongoDB - 插入数据

    db.use.js /** * 使用前:先安装node环境.express.mongodb. * * 1.1 安装Node * 1.2 npm i -D express mongodb &&a ...

  7. 【DB2】db2命令Export与Import

    环境准备 1.新建表 qinys@Linux:~> db2 "create table tb1(id int,dt timestamp,name varchar(100))" ...

  8. Asp.net管道模型（管线模型）之一发不可收拾

    前言 为什么我会起这样的一个标题,其实我原本只想了解asp.net的管道模型而已,但在查看资料的时候遇到不明白的地方又横向地查阅了其他相关的资料,而收获比当初预想的大了很多. 有本篇作基础,下面两篇就 ...

  9. swift 可变參数

    func sumof(numbers:Int...)->Int{  var sum = 0;  for number in numbers{   sum+=number;  }  return ...

  10. jenkins调用shell脚本 输出带颜色字体

    jenkins需要安装AnsiColor插件在构建环境项选择“color ansi console output” 安装插件AnsiColor shell 脚本相关颜色设置 echo -e " ...