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. Photoshop如何实现UI自动切图？

    切图严格来说并不是UI设计师的工作, 而是前端工程师的工作,指的是将UI设计师的设计(大部分为photoshop创建的PSD文件)转化为界面(网页或窗体等)所需要资源的过程.切图是衔接UI设计和应用程 ...

  2. Photopile JS – 帮助你实现精致的照片堆叠效果

    Photopile JS 是模拟照片散布堆叠在一起的 JavaScript/jQuery 图片库.点击缩略图,照片会弹出放大 ,再次点击照片会返回.缩略图是可拖动的,允许照片深深的堆在一起而不被覆盖, ...

  3. Windows服务器如何选 搭建WAMP环境

    Windows Server 2003 Windows Server 2008 如何选择服务器系统版本.原文地址:http://www.xwamp.com/learn/1. 系统版本: Windows ...

  4. Web持久化存储Web SQL、Local Storage、Cookies（常用）

    在浏览器客户端记录一些信息,有三种常用的Web数据持久化存储的方式,分别是Web SQL.Local Storage.Cookies. Web SQL 作为html5本地数据库,可通过一套API来操纵 ...

  5. 原生JS：String对象详解

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  6. CSS常用样式（四）之animation

    上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...

  7. SharePoint 判断用户是否在字段"人员和组"里面

    两个自己平时写的方法,记录下来,方便以后查找使用: 1.判断用户是否在字段人员和组里面: public static bool IsUserInFiled(int UserID, string Lis ...

  8. 你真的了解UIApplication吗？

    一:首先查看一下关于UIApplication的定义 NS_CLASS_AVAILABLE_IOS(2_0) @interface UIApplication : UIResponder //获得单例 ...

  9. 【代码笔记】iOS-判断textField里面是否有空

    一,效果图. 二,工程图. 三,代码. ViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional ...

  10. 约瑟夫环问题分析-C语言经典面试题

    好久没有看有关算法的问题了,今天废了不少劲,再感叹一句:要想学好算法就要常练习,没什么捷径可走.废话不多说,如下: 问题描述:有m个人,围成一个环,编号为 0.1.2.3...m-1,从第一个人开始循 ...