AI专业者开发社区 1 号成员
  •  0 回帖  •  10 浏览  •  4 个月前
   

css多栏自适应布局

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>

View Code

2、绝对定位实现

.container{width: 100%;position: relative;padding-left: 150px;}
.left {width: 150px;position: absolute;left: 0;}
/*流体布局*/
.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>

View Code

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>

View Code

效果同上。

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>
View Code

 

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

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>
View Code

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>

View Code

三、左右都自适应

在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>
View Code

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

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

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

四、三栏布局，左右定宽，中间内容自适应【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 </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">{</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        background-color</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> pink</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        width</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> 150px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        float</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> left</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 0, 1)">

    .right </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">{</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        background-color</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> pink</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        float</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> right</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        width</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> 100px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 0, 1)">

    .content </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">{</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        background-color</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> green</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        margin-right</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> 100px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        margin-left</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> 150px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 0, 1)">

    .footer </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">{</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        background-color</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> grey</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        clear</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> both</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>



</head>
<body>
<div id="page">
<div class="header">
标题
</div>
<div class="left">
left <strong>固定</strong>
----------- 左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
</div>
<div class="right">
right <strong>固定</strong>
---------- 右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
</div>


<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="content"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
    内容区域
    content
    </span><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">strong</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>自适应<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">strong</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
    --------------自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应
</span><span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="footer"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>页脚<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">P</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>



</div>
</body>
</html>

View Code

缺点：

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 </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">{</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        background-color</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> pink</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        position</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> absolute</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        right</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">0</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        top</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> 0</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        width</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> 100px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 0, 1)">

    .content </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">{</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        background-color</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> green</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        margin-right</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> 100px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        margin-left</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> 150px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>



</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>

View Code

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 </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">{</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        background-color</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> pink</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        width</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> 150px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        margin-left</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> -100%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 0, 1)">

    .right </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">{</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        background-color</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> pink</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        width</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> 100px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        margin-left</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> -100px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 0, 1)">

    .content </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">{</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        width</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> 100%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        background-color</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> green</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 0, 1)">

    .body </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">{</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        margin-left</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> 150px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        margin-right</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> 100px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>



</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>

View Code

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>
View Code

目前的效果是这样：

将左边 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>
View Code

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

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

 

资源链接：

基于 CSS3 的自适应布局技术

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

 

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