CSS布局方案——多列布局

左定宽 + 右自适应

• 假设有HTML如下：

<div class="parent">
    <div class="left">left，假设width=100px</div>
    <!-- left和right间有20px间距 -->
    <div class="right">right</div>
</div>

• 方案一：float + margin
  • CSS代码：

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

  • 优点：简单，兼容性好。
  • 缺点：1、IE6中float会产生3px的缩进，因此需要在left中加上_margin-right:-3px；2、如果在right中清除浮动，则right会掉下去（right的border-top与left的border-bottom齐平）。
• 方案二：float + margin + .fix
  • 先给right外再套一层div.right-fix，html如下：

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

  • CSS代码：

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

  • 优点：同方案一。
  • 缺点：1、IE6中float会产生3px的缩进；2、需要多加一层div。
• 方案三：float + overflow
  • CSS代码：

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

  • 优点：触发BFC。
  • 缺点：IE6不支持该方案。
• 方案四：table + table-cell
  • CSS代码：

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

  • 优点：table-layout实现了布局优先，加速table渲染。
  • 缺点：1、代码较多；2、IE7-不支持display:table和display:table-cell；3、如有背景，需要设置background-clip:content-box，但background-clip是CSS3属性，IE8-不支持。
• 方案五：flex
  • CSS代码：

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

  • 优点：不用设置left。
  • 缺点：IE8-不支持flex；且flex性能较差，只适合小范围、结构简单的布局。
• 拓展：左定宽+中自适应+右定宽

左不定宽 + 右自适应

• 假设有HTML如下：

<div class="parent">
    <div class="left">left，width通过内容撑开</div>
    <!-- left和right间有20px间距 -->
    <div class="right">right</div>
</div>

• 方案一：float + overflow
  • CSS代码：

  .left { float:left; margin-right:20px; }
  .right { overflow:hidden; }
  /* .left *{ width:100px;}  通过内容将left撑开 */
  

  • 优缺点：见定宽的方案三。
• 方案二：table + table-cell
  • CSS代码：

  .parent { display:table; width:100%; } /* 要实现内容优先，所以不用table-layout */
  .left, .right { display:table-cell; }
  .left { width:0.1%; padding-right:20px; }
  

  • 优缺点：见定宽的方案四。
  • PS：将left的width设置足够小的值，但不要用px（1px在IE8下有问题），然后通过内容撑开left。
• 方案五：flex
  • CSS代码：

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

  • 缺点：见定宽的方案五。
• 拓展：不定宽*N + 自适应

等分

• 假设有HTML如下：

<div class="parent">
    <div class="col">第一列</div>
    <!-- 此处省略m列；共n列，每列宽度一样，列间间距也一样（假设为20px） -->
    <div class="col">第N列</div>
</div>

• 方案一：float + box-sizing
  • CSS代码（假设有4列）：

  .parent { margin-left:-20px; }
  .col { float:left; width:25%; padding-left:20px; box-sizing:border-box;}
  

  • 思路：总宽度 + 间距 = （每列宽度 + 间距）*N
  • 缺点：1、IE7-中对于浮点数的处理有问题（不能整除时）；2、结构与样式耦合性强，列数变化要修改css样式；3、parent左侧多一列间距。
• 方案二：table + .fix
  • 先在parent外套一层div.parent-fix，html如下：

  <div class="parent-fix">
      <div class="parent">
        <div class="col">省略n个div.col</div>
      </div>
  </div>
  

  • CSS代码：

  .parent-fix { margin-left:-20px; }
  .parent { display:table; width:100%; table-layout:fixed; }
  .col { display:table-cell; padding-left:20px; }
  

  • 思路：table宽度随着内容变化；未设置单元格宽度时，table-layout使其宽度平分。
  • 优点：结构与样式解耦合。
  • 缺点：1、多套一层div；2、parent左侧多一列间距。
• 方案三：flex
  • CSS代码：

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

  • 思路：flex:1等分容器的剩余空间。
  • 优点：结构与样式解耦合；设置简单。
  • 缺点：IE8-不支持flex。
• 拓展：九宫格

等高（左自适应 + 右定高）

• 假设有HTML如下：

<div class="parent">
    <div class="left">left，假设width为100px</div>
    <!-- left和right间有20px间距 -->
    <div class="right">right</div>
</div>

• 方案一：table + table-cell
  • 见定宽的方案四。
  • 表格每行的单元格天然等高。
• 方案二：flex
  • 见定宽的方案五。
  • flex布局的align-items属性的默认值为stretch，天然等高。
• 方案三：float + overflow
  • CSS代码：

  .parent { overflow:hidden; }
  .left, .right { padding-bottom:9999px; margin-bottom:-9999px; }
  /* .left{ float:left; margin-right:20px; } */
  /* .right{ overflow:hidden; } */
  

  • 思路：margin-bottom和padding-bottom相互抵消，再用overflow截断。
  • 缺点：伪等高，实际上容器还是很大。