多列布局

多列布局在网页中非常常见，多列布局可以是两列定宽，一列自适应，或者多列不定宽一列自适应还有等分布局等。

一列定宽，一列自适应

[1] float + margin

[ 原理 ] 通过将左框脱离文本流，加上右框向右移动一定的距离，以达到视觉上的多列布局。

[ 用法 ] 先将左框设置为float:left、margin-left，再设置右框margin-left。

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

<style>
   .left {
     float: left;
     width: 100px;
   }
   .right {
     margin-left: 100px
     /*间距可再加入 margin-left */
   }
</style>

// 优点：简单，易理解；
// 兼容性存在一定问题，ie6下有3px的bug（解决方法，可以在.left加入margin-left:-3px;）。right下的p清除浮动将产生bug。

</div>

<p>right</p>

</div>

<style>

.left {

float: left;

width: 100px;

}

.right {

margin-left: 100px

/*间距可再加入 margin-left */

}

</style>

// 优点：简单，易理解；

// 兼容性存在一定问题，ie6下有3px的bug（解决方法，可以在.left加入margin-left:-3px;）。right下的p清除浮动将产生bug。

[2] float + margin + (fix) 改良版

[ 原理 ] 在 1 的基础之上，通过向右框添加一个父框，再加上设置左、右父框属性使之产生BFC以去除bug。

[ 用法 ] 先将左框设置为float:left、margin-left、position:relative，再设置右父框float:right、width:100%、margin-left，最后设置实际的右框margin-left。

// 此方法不会存在 IE 6 中3像素的 BUG，但.left不可选择， 需设置.left{position:relative;}来提高层级。

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

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right-fix {
    float: right;
    width: 100%;
    margin-left: -100px;
  }
  .right {
    margin-left: 100px
    /*间距可再加入 margin-left */
  }
</style>

// 优点：此方法可以适用于多版本浏览器（包括 IE6）。
// 缺点：多余的 HTML 文本结构。

// 此方法不会存在 IE 6 中3像素的 BUG，但.left不可选择，需设置.left{position:relative;}来提高层级。

</div>

<p>right</p>

</div>

<style>

.left {

float: left;

width: 100px;

}

.right-fix {

float: right;

width: 100%;

margin-left: -100px;

}

.right {

margin-left: 100px

/*间距可再加入 margin-left */

}

</style>

// 优点：此方法可以适用于多版本浏览器（包括 IE6）。

// 缺点：多余的 HTML 文本结构。

[3] float + overflow

[ 原理 ] 通过将左边框脱离文本流，设置右边规定当内容溢出元素框时发生的事情以达到多列布局。

[ 用法 ] 先将左框设置为float:left、width、margin-left，再设置实际的右框overflow:hidden。

// 设置 overflow:hidden; 会触发 BFC 模式，在 BFC 中的内容<strong>与外界的元素是隔离的</strong>。

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

<style>
   .left {
     float: left;
     width: 100px;
   }
   .right {
     overflow: hidden;
   }
</style>

// 优点：样式简单；
// 缺点：不支持IE6。

// 设置 overflow:hidden; 会触发 BFC 模式，在 BFC 中的内容<strong>与外界的元素是隔离的</strong>。

</div>

<p>right</p>

</div>

<style>

.left {

float: left;

width: 100px;

}

.right {

overflow: hidden;

}

</style>

// 优点：样式简单；

// 缺点：不支持IE6。

[4] table

[ 原理 ] 通过将父框设置为表格，将左右边框转化为类似于同一行的td，从而达到多列布局。

[ 用法 ] 先将父框设置为 display:table、width:100%、table-layout:fixed，再设置左右框 display:table-cell，最后设置左框width、padding-right。

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

<style>
   .parent {
      display: table;
      width: 100%;
      table-layout: fixed;
   }
   .left {
      display: table-cell;
      width: 100px;
   }
   .right {
      display: table-cell;
      /*宽度为剩余宽度*/
   }
</style>

// table-cell&nbsp;中不可以设置&nbsp;margin&nbsp;但是可以通过&nbsp;padding&nbsp;来设置间距。
// table的显示特性为每列的单元格宽度合一定等与表格宽度。 table-layout: fixed; 可加速渲染，设定布局优先。

</div>

<p>right</p>

</div>

<style>

.parent {

display: table;

width: 100%;

table-layout: fixed;

}

.left {

display: table-cell;

width: 100px;

}

.right {

display: table-cell;

/*宽度为剩余宽度*/

}

</style>

// table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距。

// table的显示特性为每列的单元格宽度合一定等与表格宽度。 table-layout: fixed; 可加速渲染，设定布局优先。

[5] flex

[ 原理 ] 通过设置CSS3布局利器flex中的flex属性以达到多列布局。

[ 用法 ] 先将父框设置为display:flex，再设置左框flex:1，最后设置左框width、margin-right。

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

<style>
   .parent {
      display: flex;
   }
   .left {
      width: 100px;
      margin-left: 20px;
   }
   .right {
      flex: 1;
      /*等价于*/
      /*flex: 1 1 0;*/
   }
</style>

// 优点：flex很强大
// 缺点：低版本浏览器兼容问题；性能问题，只适合小范围布局。

</div>

<p>right</p>

</div>

<style>

.parent {

display: flex;

}

.left {

width: 100px;

margin-left: 20px;

}

.right {

flex: 1;

/*等价于*/

/*flex: 1 1 0;*/

}

</style>

// 优点：flex很强大

// 缺点：低版本浏览器兼容问题；性能问题，只适合小范围布局。

两列定宽，一列自适应

[ 原理 ]多列定宽的实现可以更具单列定宽的例子进行修改与实现。

[ 用法 ] 先将左、中框设置为float:left、width、margin-right，再设置右框overflow:hidden。

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

<style>
   .left, .center {
      float: left;
      width: 100px;
      margin-right: 20px;
   }
   .right {
      overflow: hidden;
      /*等价于*/
      /*flex: 1 1 0;*/
   }
</style>

</div>

<p>center<p>

</div>

<p>right</p>

</div>

<style>

.left, .center {

float: left;

width: 100px;

margin-right: 20px;

}

.right {

overflow: hidden;

/*等价于*/

/*flex: 1 1 0;*/

}

</style>

一列不定宽加一列自适应

[ 原理 ] 不定宽的宽度为内容决定

[1] float + overflow

[ 原理 ] 这种情况与两列定宽查不多。

[ 用法 ] 先将左框设置为float:left、margin-right，再设置右框overflow: hidden，最后设置左框中的内容width。

<div class = "parent" >
   <div class = "left">
      <p> left </p>
   </div>
   <div class = "right">
      <p> right </p>
      <p> right </p>
   </div>
</div>
<style>
   .left{
      float : left;
      margin - right: 20px;
   }
   .right{
      overflow : hidden;
   }
   .left p{
      width : 200px;
   }
</style>

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

</div>

<p> right </p>

</div>

<style>

.left{

float : left;

margin - right: 20px;

}

.right{

overflow : hidden;

}

.left p{

width : 200px;

}

</style>

// 优点：简单

// 缺点：ie6下兼容性存在一定问题

[2] table

[ 原理 ] 通过将父框改变为表格，将左右框转换为类似于同一行的td以达到多列布局，设置父框宽度100%，给左框子元素一个固定宽度从而达到自适应。

[ 用法 ] 先将父框设置为display: table、width: 100%，再设置左、右框display: table-cell，最后设置左框width: 0.1%、padding-right以及左框中的内容width。

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

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

// 缺点：ie6 ie7不支持

</div>

<p> right </p>

</div>

<style>

.parent{

display : table; width: 100%;

}

.left,.right{

display : table-cell;

}

.left{

width : 0.1%;

padding - right: 20px;

}

.left p{

width :200px;

}

</style>

// 缺点：ie6 ie7不支持

[3] flex

[ 原理 ] 通过设置CSS3布局利器flex中的flex属性以达到多列布局，加上给左框中的内容定宽、给右框设置flex达到不定款+自适应。

[ 用法 ] 先将父框设置为display:flex，再设置右框flex:1，最后设置左框margin-right:20px、左框中的内容width。

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

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

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

</div>

<p> right </p>

</div>

<style>

.parent {

display:flex;

}

.left {

margin - right:20px;

}

.right {flex:1;}

.left p{

width: 200px;

}

</style>

// 优点：flex很强大

// 缺点：兼容性存在一定问题，性能存在一定问题

两列不定宽 + 一列自适应

[ 原理 ] 这个情况与一列不定宽+一列自适应查不多。

[ 用法 ] 先将左、中框设置float:left、margin-right，再设置右框overflow:hidden，最后给左中框中的内容设置width。

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

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

</div>

<divclass="center">

<p>center</p>

</div>

<p> right </p>

</div>

<style>

.left,.center{

float : left;

margin - right: 20px;

}

.right{

overflow : hidden;

}

.left p,.center p{

width : 100px;

}

</style>

多列等分布局

[ 页面效果 ] 每一列的宽度和间距均相等。

[ 公式转化 ]父容器宽度为 C，C = W * N + G * N - G => C + G = (W + G) * N。

因此，我们需要解决两个问题：

如何让总宽度增加g(即：L+g)

如何让每个宽包含g（即：w+g）

[1] float

[ 原理 ]增大父框的实际宽度后，使用CSS3属性box-sizing进行布局的辅助

[ 用法 ]先将父框设为margin-left: -*px，再设子框float: left、width: 25%、padding-left、box-sizing: border-box。

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

<style media="screen">
   .parent {
      margin-left: -20px;
   }
   .column {
      float: left;
      width: 25%;
      padding-left: 20px;
      box-sizing: border-box;
   }
</style>

// 优点：此方法可以完美兼容 IE8 以上版本
// 缺点：ie6 ie7百分比兼容存在一定问题

</div>

</div>

</div>

</div>

.parent {

margin-left: -20px;

}

.column {

float: left;

width: 25%;

padding-left: 20px;

box-sizing: border-box;

}

</style>

// 优点：此方法可以完美兼容 IE8 以上版本

// 缺点：ie6 ie7百分比兼容存在一定问题

[2] table

[ 原理 ] 通过增加一个父框的修正框，增大其宽度，并将父框转换为table，将子框转换为tabel-cell进行布局。

[ 用法 ] 先将父框的修正框设置为margin-left: -*px，再设置父框display: table、width:100%、table-layout: fixed，设置子框display: table-cell、padding-left。

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

<style media="screen">
  .parent-fix {
    margin-left: -20px;
  }
  .parent {
    display: table;
    width: 100%;
    /*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/
    table-layout: fixed;
  }
  .column {
    display: table-cell;
    padding-left: 20px;
  }
</style>

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

</div>

</div>

</div>

</div>

.parent-fix {

margin-left: -20px;

}

.parent {

display: table;

width: 100%;

/*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/

table-layout: fixed;

}

.column {

display: table-cell;

padding-left: 20px;

}

</style>

// 优点：结构和块数无关联

// 缺点：增加了一层

[3] flex

[ 原理 ] 通过设置CSS3布局利器flex中的flex属性以达到等分布局。

[ 用法 ] 将父框设置为display: flex，再设置子框flex: 1，最后设置子框与子框的间距margin-left。

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


<style media="screen">
  .parent {
    display: flex;
  }
  .column {
    /*等价于 flex: 1 1 0;*/
    flex: 1;
  }
  .column+.column {
    margin-left: 20px;
  }
</style>

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

</div>

</div>

</div>

</div>

.parent {

display: flex;

}

.column {

/*等价于 flex: 1 1 0;*/

flex: 1;

}

.column+.column {

margin-left: 20px;

}

</style>

// 优点：代码量少，与块数无关

// 缺点：兼容性存在一定问题

等高：定宽 + 自适应 + 两块高度一样高

[1] table

[ 原理 ] 将父框转化为tabel，将子框转化为tabel-cell布局，以达到定宽+自适应+两块高度一样高。

[ 用法 ] 先将父框设置为display:table、width:100%、table-layout:fixed，再设置左右框为display:table-cell，最后设置左框width、padding-right。

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

<style>
  .parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell;
    /*宽度为剩余宽度*/
  }
</style>

</div>

<p>right</p>

</div>

<style>

.parent {

display: table;

width: 100%;

table-layout: fixed;

}

.left {

display: table-cell;

width: 100px;

}

.right {

display: table-cell;

/*宽度为剩余宽度*/

}

</style>

[2] flex

[ 原理 ] 通过设置CSS3布局利器flex中的flex属性以达到定宽+自适应+两块高度一样高。

[ 用法 ] 将父框设置为display: flex，再设置左框width、margin-right，最后设置右框flex:1。

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

<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
    margin-left: 20px;
  }
  .right {
    flex: 1;
    /*等价于*/
    /*flex: 1 1 0;*/
  }
</style>

// 优点：代码少，flex很强大
// 缺点：兼容性存在一定问题

</div>

<p>right</p>

</div>

<style>

.parent {

display: flex;

}

.left {

width: 100px;

margin-left: 20px;

}

.right {

flex: 1;

/*等价于*/

/*flex: 1 1 0;*/

}

</style>

// 优点：代码少，flex很强大

// 缺点：兼容性存在一定问题

[3] float

[ 原理 ] 通过过分加大左右子框的高度，辅助超出隐藏，以达到视觉上的等高。

[ 用法 ] 将父框设置overflow: hidden，再设置左右子框padding-bottom: 9999px、margin-bottom: -9999px，最后设置左框float: left、width、margin-right，右框overflow: hidden。

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

<style>
  .parent {
    overflow: hidden;
  }
  .left,.right {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
  }
  .left {
    float: left;
    width: 100px;
    margin-right: 20px;
  }
  .right {
    overflow: hidden;
  }
</style>

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

</div>

<p>right</p>

</div>

<style>

.parent {

overflow: hidden;

}

.left,.right {

padding-bottom: 9999px;

margin-bottom: -9999px;

}

.left {

float: left;

width: 100px;

margin-right: 20px;

}

.right {

overflow: hidden;

}

</style>

// 优点：兼容性好

// 缺点：伪等高，不是真正意义上的等高

[4] display

[ 原理 ] 通过设置display中的CSS3的-webkit-box属性以达到定宽+自适应+两块高度一样高。

[ 用法 ] 父框 display: -webkit-box、width: 100%，然后，左框width、margin-right，最后右框-webkit-box-flex: 1。

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

<style>
   .parent {
      width : 100%;
      display : -webkit-box;
   }
   .left {
      width :100px;
      margin -right : 20px;
   }
   .right {
      -webkit - box - flex: 1;
   }
</style>

// 缺点：兼容性存在较大的问题

left

</div>

<div class = "right">right </div>

</div>

<style>

.parent {

width : 100%;

display : -webkit-box;

}

.left {

width :100px;

margin -right : 20px;

}

.right {

-webkit - box - flex: 1;

}

</style>

// 缺点：兼容性存在较大的问题