css多栏自适应布局还是需要总结一下的，都是基本功。

一般使用position属性布局，或者用float属性布局，也可以使用display属性。

看资料说position适合首页布局，因为首页内容往往可以完全控制。float适合模板布局，模板中填充的内容无法控制。

一、左侧尺寸固定右侧自适应

1、浮动实现

在css浮动一文已介绍过。

 .left{

    width: 150px; float: left;

  }

  /*流体布局*/

.right { margin-left: 150px;}

原理：左侧定宽浮动，右侧使用margin-left，且不要定宽，容器尺寸变化右侧可自适应

<!DOCTYPE html>

<meta charset="utf-8"/>

<html>

<head>

    <title></title>

    <style type="text/css">

.left {

    width: 150px;

    float: left;

    background-color: pink;

}

/*流体布局*/

.right {

    margin-left: 150px;

    background-color: green;

}

  </style>

</head>

<body>

    <div class="left">

        左侧内容固定---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左

    </div>

    <div class="right">

        右侧内容自适应----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右

    </div>

</body>

</html>

2、绝对定位实现

.container{width: 100%;position: relative;padding-left: 150px;}

.left {width: 150px;position: absolute;left:;}

/*流体布局*/

.right {width: 100%;}

原理：重点是container设置padding-left给left腾出空间，left相对于containr绝对定位，right占满剩余空间。

<!DOCTYPE html>

<meta charset="utf-8"/>

<html>

<head>

    <title>2 columns layout of starof</title>

<style type="text/css">

.container {

    width: 100%;

    position: relative;

    padding-left: 150px;

}

.left {

    width: 150px;

    position: absolute;

    left: 0;

    background-color: pink;

}

/*流体布局*/

.right {

    width: 100%;

    background-color: green;

}

</style>

</head>

<body>

    <div class="container">

        <div class="left">

            左侧内容 <strong>固定</strong>

            ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左

        </div>

        <div class="right">

            右侧内容 <strong>自适应</strong>

            ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右

        </div>

    </div>

</body>

</html>

3、BFC实现

.left {width: 150px;float: left;}

.right {display: table-cell;}

原理：左栏定宽浮动，右栏生成BFC，根据BFC特性，与浮动元素相邻的，创建了BFC的元素，都不能与浮动元素相互覆盖。

<!DOCTYPE html>

<meta charset="utf-8"/>

<html>

<head>

    <title>2 columns layout of starof</title>

<style type="text/css">

.left {

    width: 150px;

    float: left;

    background-color: pink;

}

/*流体布局*/

.right {

    display: table-cell;

    background-color: green;

}

</style>

</head>

<body>

        <div class="left">

            左侧内容 <strong>固定</strong>

            ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左

        </div>

        <div class="right">

            右侧内容 <strong>自适应</strong>

            ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右

        </div>

</body>

</html>

效果同上。

4、table实现

.container {width: 100%;display: table;}

.left {width: 150px;display: table-cell;}

.right {display: table-cell;}

原理：不说了。

<!DOCTYPE html>

<meta charset="utf-8"/>

<html>

<head>

    <title>2 columns layout of starof</title>

<style type="text/css">

.container {

    width: 100%;

    display: table;

}

.left {

    width: 150px;

    display: table-cell;

    background-color: pink;

}

.right {

    display: table-cell;

    background-color: green;

}

</style>

</head>

<body>

    <div class="container">

        <div class="left">

            左侧内容 <strong>固定</strong>

            ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左

        </div>

        <div class="right">

            右侧内容 <strong>自适应</strong>

            ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右

        </div>

    </div>

</body>

</html>

二、 右侧尺寸固定，左侧自适应的流体布局

1、不改变DOM位置的写法【用的比较多】

在css浮动一文已介绍过。

.wrap {

    width: 100%;

    float: left;

    background-color: green;

}

.left {

    margin-right: 150px;

}

.right {

    width: 150px;

    float: left;

    margin-left: -150px;

    background-color: pink;

}

原理：给left包裹一层wrap，wrap用来布局，left调整内容。

wrap和right都左浮动，这样right会超过视口，通过设置margin-left负值拉回。

此时right回到窗口，但会覆盖wrap内容。left就派上用场了，left设置margin-right将内容拉回。此时布局和内容都达到目的，完成！

<!DOCTYPE html>

<meta charset="utf-8"/>

<html>

<head>

    <title></title>

<style type="text/css">

.wrap {

    width: 100%;

    float: left;

    background-color: green;

}

.left {

    margin-right: 150px;

}

.right {

    width: 150px;

    float: left;

    margin-left: -150px;

    background-color: pink;

}

</style>

</head>

<body>

    <div class="wrap">

        <div class="left">

            左侧内容 <strong>自适应</strong>

            ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左

        </div>

    </div>

    <div class="right">

        右侧内容 <strong>固定</strong>

        ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右

    </div>

</body>

</html>

2、改变DOM位置的写法

在css浮动一文已介绍过。

.right{

float: right;

width: 150px;

}

.left{

margin-right: 150px;

}

原理：因为右边先渲染，右边右浮动，左边设margin-right即可。

<!DOCTYPE html>

<meta charset="utf-8"/>

<html>

<head>

    <title>2 columns layout of starof</title>

    <style type="text/css">

.left {

    margin-right: 150px;

    background-color: green;

}

.right {

    width: 150px;

    float: right;

    background-color: pink;

}

</style>

</head>

<body>

    <div class="right">

        右侧内容 <strong>固定</strong>

        ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右

    </div>

    <div class="left">

        左侧内容 <strong>自适应</strong>

        ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左

    </div>

</body>

</html>

三、左右都自适应

在css浮动一文已介绍过。

.left {float: left;}

.right{display: table-cell;}

原理：左栏左浮动，右栏生成BFC，根据BFC特性：与浮动元素相邻的、创建了BFC的元素，都不能与浮动元素相互覆盖。

<!DOCTYPE html>

<meta charset="utf-8"/>

<html>

<head>

    <title>2 columns layout of starof</title>

    <style type="text/css">

.left {

    float: left;

    background-color: green;

}

img{

    width: 100px;

    height: 100px;

}

.right {

    display: table-cell;

    background-color: pink;

}

</style>

</head>

<body>

    <div class="left">

        <img src="img/sheep.png"></div>

    <div class="right">

        右侧内容 <strong>自适应</strong>

        ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右

    </div>

</body>

</html>

缺点：由于IE6并不支持display:table-cell，用css hack弥补，右侧设定overflow:auto;zoom:1或者overflow:hidden;zoom:1。

.right{ display:table-cell;_display:block;zoom:;}

应用案例：红色框部分，两栏自适应，左右都不定宽，右侧栏数量不定。

四、三栏布局，左右定宽，中间内容自适应【update20170422】

1、左右float+中间margin实现

.left {width: 150px;float: left;}

.right {width: 100px;float: right;}

.content {margin-right: 100px;margin-left: 150px;}

.footer {clear: both;}

原理：用float实现。

左边定宽左浮动，右边定宽右浮动，中间margin调整左右间距，底部清除浮动。

Note:left和right的html代码写在content之前，先渲染。

<!DOCTYPE>

<html>

<meta charset="utf-8"/>

<head>

    <title>3 columns layout of starof</title>

    <style type="text/css">

        .header {

            background-color: gray;

        }

        .left {

            background-color: pink;

            width: 150px;

            float: left;

        }

        .right {

            background-color: pink;

            float: right;

            width: 100px;

        }

        .content {

            background-color: green;

            margin-right: 100px;

            margin-left: 150px;

        }

        .footer {

            background-color: grey;

            clear: both;

        }

    </style>

</head>

<body>

<div id="page">

    <div class="header">

        标题

    </div>

    <div class="left">

        left <strong>固定</strong>

        -----------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左

    </div>

    <div class="right">

        right <strong>固定</strong>

        ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右

    </div>

    <div class="content">

        内容区域

        content

        <strong>自适应</strong>

        --------------自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应

    </div>

    <div class="footer">

        <p>页脚</P>

    </div>

</div>

</body>

</html>

缺点：

DOM顺序和视觉顺序不同，关键的主体内容在文档后面，主次不合理。如果右栏包含大量脚本资源，可能影响甚至阻塞整个页面的载入。不适合用做整站页面框架的搭建。

2、左右绝对定位+margin

原理：左右绝对定位，中间margin:0 100px 0 150px;

<!DOCTYPE>

<html>

<meta charset="utf-8"/>

<head>

    <title>3 columns layout of starof</title>

    <style type="text/css">

        .page{

            position: relative;

        }

        .left {

            background-color: pink;

            width: 150px;

            position: absolute;

            left: 0;

            top:0;

        }

        .right {

            background-color: pink;

            position: absolute;

            right:0;

            top: 0;

            width: 100px;

        }

        .content {

            background-color: green;

            margin-right: 100px;

            margin-left: 150px;

        }

    </style>

</head>

<body>

<div class="page">

    <div class="left">

        left <strong>固定</strong>

        -----------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左

    </div>

    <div class="content">

        内容区域

        content

        <strong>自适应</strong>

        --------------自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应

    </div>

    <div class="right">

        right <strong>固定</strong>

        ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右

    </div>

</div>

</body>

</html>

3、左中右全部浮动+左右margin-left负值

重点是content 右2层标签，外层content布局，内层body内容展示。content，right，content都左浮动。content100%宽度，left设置margin-left:-100%，由于前面的content宽度100%于浏览器，所以这里的-100%margin值正好使左栏div定位到了页面的左侧，right设置margin-left:-100px；content里面加一层body为内容主体，设置margin:0 100px 0 150px;

<!DOCTYPE>

<html>

<meta charset="utf-8"/>

<head>

    <title>3 columns layout of starof</title>

    <style type="text/css">

        .content, .left, .right {

            float: left;

        }

        .left {

            background-color: pink;

            width: 150px;

            margin-left: -100%;

        }

        .right {

            background-color: pink;

            width: 100px;

            margin-left: -100px;

        }

        .content {

            width: 100%;

            background-color: green;

        }

        .body {

            margin-left: 150px;

            margin-right: 100px;

        }

    </style>

</head>

<body>

<div class="content">

    <div class="body">

        <div style="width:100px;height: 100px;border:1px solid red"></div>

        内容区域

        content

        <strong>自适应</strong>

        --------------自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应

    </div>

</div>

<div class="left">

    left <strong>固定</strong>

    -----------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左

</div>

<div class="right">

    right <strong>固定</strong>

    ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右

</div>

</body>

</html>

content结构在left和right前面。

4、float+负margin实现

原理：分而治之，多封装一层，两两处理。

原理简单，处理起来稍复杂，我分步说明。

步骤一：先处理好right布局，wrap和right都左浮动，即应用上面【右侧尺寸固定，左侧自适应的流体布局】的第一种方法。

<!DOCTYPE html>

<meta charset="utf-8"/>

<html>

<head>

    <title></title>

<style type="text/css">

.wrap {

    width: 100%;

    float: left;

    background-color: green;

}

.leftwrap {

    margin-right: 150px;

}

.right {

    width: 150px;

    float: left;

    margin-left: -150px;

    background-color: pink;

}

</style>

</head>

<body>

    <div class="wrap">

        <div class="leftwrap">

            留空

        </div>

    </div>

    <div class="right">

        右侧内容 <strong>固定</strong>

        ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右

    </div>

</body>

</html>

目前的效果是这样：

将左边leftwrap留空部分补上下面结构

<div class="contentwrap">

    <div class="content">主体部分</div>

</div>

<div class="left">左侧栏</div>

步骤二：再处理left和content布局，contentwrap右浮动，left左浮动，完成。

<!DOCTYPE html>

<meta charset="utf-8"/>

<html>

<head>

    <title>3 columns layout of starof</title>

<style type="text/css">

/*步骤一：先处理好right布局，wrap和right都右浮动*/

.wrap { width: 100%; float: left; } /*wrap控制布局*/

.leftwrap { margin-right: 150px; }/*leftwrap控制内容*/

.right { width: 150px; float: left; margin-left: -150px; background-color: pink; }

/*步骤二：再处理left和content布局，contentwrap右浮动，left左浮动*/

.contentwrap { float: right; width: 100%; }/*contentwrap控制主体内容布局*/

.left { float: left; width: 200px; margin-right: -200px; background-color: pink; }

.content { margin-left: 200px; background-color: green; }/*content控制主体内容*/

</style>

</head>

<body>

    <div class="wrap">

        <div class="leftwrap">

            <div class="contentwrap">

                <div class="content">content<strong>自适应</strong></div>

            </div>

            <div class="left">

            左侧内容 <strong>固定</strong>

            ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</div>

        </div>

    </div>

    <div class="right">

        右侧内容 <strong>固定</strong>

        ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右

    </div>

</body>

</html>

缺点：嵌套多层标签，html文档不够简洁。

总结：如果不是必要，浮动布局不要轻易定宽高，尽量自适应。

资源链接：

基于CSS3的自适应布局技术

https://github.com/RubyLouvre/myless/issues/2

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4744392.html有问题欢迎与我讨论，共同进步。

css多栏自适应布局的更多相关文章

  1. css 多栏自适应布局

    在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师", ...

  2. CSS 三栏自适应布局

    CSS布局 这个很基础,方法也很多,要留意的知识点还是有一些. 比如IE6的触发layout  *zoom:1 比如使用浮动后的清除浮动  clear:both 需求的延伸也会有一些: 比如三栏等高 ...

  3. CSS 3栏自适应布局

    绝对定位 css html,body{margin: 0px;height:100%;} div{height: 100%;} .left,.right {top: 0px;position: abs ...

  4. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  5. CSS深入理解流体特性和BFC特性下多栏自适应布局

    一.块状元素的流体特性与自适应布局 块状元素像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性. 来一个小实验: di ...

  6. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  7. 你知道BFC、IFC、FFC、GFC及多栏自适应布局吗？

    FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出 ...

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

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

  9. 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

随机推荐

  1. [deviceone开发]-基础文件管理器

    一.简介 主要实现本地文件管理功能,主要功能为复制.粘贴.剪切目录或者文件. 二.效果 三.相关下载 https://github.com/do-project/code4do/tree/master ...

  2. 轻松掌握：JavaScript装饰者模式

    装饰者模式 在传统的面向对象语言中,给对象添加功能常常使用继承的方式,但继承的方式会带来问题:当父类改变时,他的所有子类都将随之改变. 当JavaScript脚本运行时,在一个对象中(或他的原型上)增 ...

  3. SQL增强之Merge

    SQL Server 2008提供了一个增强的SQL命令Merge,用法参看MSDN:http://msdn.microsoft.com/zh-cn/library/bb510625.aspx 功能: ...

  4. js编写当天简单日历

    之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日 ...

  5. button与input[type=”button”]的区别

    button与input[type="button"]的区别 特别感谢 @守护晴天 ,指出了博客中不细致不严谨的地方,也让我学到了更多,更多是觉得抱歉,由于自己的不细致可能误导了一 ...

  6. URL 路径长度限制（错误：指定的文件或文件夹名称太长）

    本节讨论 URL 的构成.SharePoint 2010 构建 URL 的方式.URL 的编码和加长以及作为其他 URL 中的参数传递的方式. SharePoint URL 的构成 SharePoin ...

  7. linux集群运维工具:pssh

    由于需要安装hadoop集群,有10台机器需要安装,一开始打算用SCP复制,后来觉得不可接受(实际现场可能数倍的机器集群,就是10台也不想干).后来在网上找了,发现了clustershell和pssh ...

  8. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  9. Android提交数据到JavaWeb服务器实现登录

    之前学习Android提交数据到php服务器没有成功,在看了两三个星期的视频之后,现在终于实现了与服务器的交互.虽然完成的不是PHP端的,但是在这个过程还是学到了不少东西的.现在我先来展示一下我的成果 ...

  10. Java 项目JDBC 链接数据库中会出现的错误

    1.出现的地方 package com.jdbc; import java.sql.Connection; import java.sql.DriverManager; import java.sql ...