布局解决方案之多列布局

前端布局非常重要的一环就是页面框架的搭建，而在页面框架的搭建之中，居中布局、多列布局、全局布局是非常重要的一环，今天我们就来总结总结前端干货之布局的解决方案。

part 2:多列布局

一、定宽+自适应

方法一 float + margin

<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>

.left {    float:left;    width:100px;}.right {    margin-left:120px;}

• 优点:简单，易理解
• 缺点:兼容性存在一定问题，ie6下有3px的bug。right下的p清除浮动将产生bug

方法二 float + margin 改良版

<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="rigth-fix">        <div class="right">            <p>right</p>            <p>right</p>        </div>    </div></div>

.left {    float:left;    width:100px;    position:relative;}.right-fix {    float:right;    width:100%;    margin-left:-100px;}.right {    margin-left:120px;}

• 优点:简单，易理解

方法三 float + overflow

<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>

.left {    float:left;    width:100px;    margin-right:20px;}.right {    overflow:hidden;}

• 优点:简单
• 缺点:不支持ie6

方法四 table

<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>

.parent {    display:table;    width:100%;    table-layout:fixed;}.left {    width:100px;    padding-right:20px;}.right,.left {    display:table-cell; }

方法五 flex

<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>

.parent {    display:flex;}.left {    width:100px;    margin-right:20px;}.right {    flex:1;}

• 优点:flex很强大
• 缺点:兼容性存在一定问题，性能存在一定问题

两列定宽+一列自适应
与两列定宽查不多
例子：

<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="center">        <p>center</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>

.left,.center {    float:left;    width:100px;    margin-right:20px;}.right {    overflow:hidden;}

二、不定宽+自适应

方法一 float + overflow

<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>

.left{        float: left;        margin-right: 20px;    }.right{    overflow: hidden;}.left p{    width: 200px;}

• 优点:简单
• 缺点:ie6下兼容性存在一定问题

方法二 table

<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>

.parent{    display: table; width: 100%;    }.left,.right{    display: table-cell;}.left{    width: 0.1%;    padding-right: 20px;}.left p{    width:200px;}

• 缺点:ie6 ie7不支持

方法三 flex

<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>

.parent {    display:flex;}.left {    margin-right:20px;}.right {    flex:1;}.left p{    width: 200px;}

• 优点:flex很强大
• 缺点:兼容性存在一定问题，性能存在一定问题

两列不定宽+一列自适应
与一列不定宽+一列自适应查不多
例子：

<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="center">        <p>center</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>

.left,.center{    float: left;    margin-right: 20px;}.right{    overflow: hidden;}.left p,.center p{    width: 100px;}

三、等分布局

公式转化:c = w * n + g * (n-1) -> c = w * n + g * n - g -> c + g = （w + g） * n

因此，我们需要解决两个问题：1.如何让总宽度增加g(即：c+g)，2.如何让每个宽包含g（即：w+g）

方法一 float

<div class="parent">    <div class="column"><p>1</p></div>    <div class="column"><p>2</p></div>    <div class="column"><p>3</p></div>    <div class="column"><p>4</p></div></div>

.parent{    margin-left: -20px;//c增加g}.column{    float: left;    width: 25%;    padding-left: 20px;    box-sizing: border-box;//包含padding区域 w+g}

• 优点：兼容性较好
• 缺点：ie6 ie7百分比兼容存在一定问题

方法二 table

<div class="parent-fix">    <div class="parent">        <div class="column"><p>1</p></div>        <div class="column"><p>2</p></div>        <div class="column"><p>3</p></div>        <div class="column"><p>4</p></div>    </div></div>

.parent-fix{    margin-left: -20px;//c+g}.parent{    display: table;    width:100%;    table-layout: fixed;}.column{    display: table-cell;    padding-left: 20px;//w+g}

• 优点：结构和块数无关联
• 缺点：增加了一层

方法三 flex

<div class="parent">    <div class="column"><p>1</p></div>    <div class="column"><p>2</p></div>    <div class="column"><p>3</p></div>    <div class="column"><p>4</p></div></div>

.parent{    display: flex;}.column{    flex: 1;}.column+.column{    margin-left:20px;}

• 优点：代码量少，与块数无关
• 缺点：兼容性存在一定问题

四、定宽+自适应+两块高度一样高

方法一 table

<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>

.parent {    display:table;    width:100%;    table-layout:fixed;}.left {    width:100px;    padding-right:20px;}.right,.left {    display:table-cell;}

方法二 flex

<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>

.parent {    display:flex;}.left {    width:100px;    margin-right:20px;}.right {    flex:1;}

方法三 float

<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>

p{    background: none!important;}.left,.right{    background: #444;}.parent{    overflow: hidden;}.left,.right{    padding-bottom: 9999px;    margin-bottom: -9999px;}.left{    float: left; width: 100px;    margin-right: 20px;}.right{    overflow: hidden;}

• 优点：兼容性好
• 缺点：伪等高，不是真正意义上的等高