用非 <table> 模拟表格行布局的几种方式，以及其优缺点。

table_layout.md

前提（要求）

• 不允许用 <table> 系列的标签
• 每行三个单元格（三列）
• 行内单元格的宽度总和不超过行容器
• 左、右单元格的宽度根据自身内容自动调整
• 中间单元格的宽度根据左、右单元格以及行容器的宽度自动调整
• 行内单元格的（视觉上）高度相等
• 左、右单元格的内容（视觉上）水平并垂直居中
• 兼容 IE6+ 及其他浏览器

实现

一、表格

<div class="table">
  <div class="table-cell">单元格 1</div>
  <div class="table-cell">单元格 2</div>
  <div class="table-cell">单元格 3</div>
</div>

<style>
  .table { display: table; }
  .table-cell { display: table-cell; }
</style>

示例

http://jsbin.com/asepid

缺点

1. 中间单元格的内容宽度不够时，右单元格会向左移动
2. 不兼容 IE8 以下的浏览器

二、浮动

 <div class="wrapper">
    <div class="right">单元格 3</div>
    <div class="left">单元格 1</div>
    <div class="middle">单元格 2</div>
 </div>
 
 <style>
    .wrapper, .middle { overflow: hidden; }
    .right { float: right; }
    .left { float: left; }
 </style>

示例

http://jsbin.com/awexem

缺点

列高不等，不能垂直居中。

三、行内块

 <div class="dib-wrap">
    <div class="dib">单元格 1</div>
    <div class="dib">单元格 2</div>
    <div class="dib">单元格 3</div>
 </div>
 
 <style>
    .dib-wrap { font-size: 0; *word-spacing: -1px; }
    .dib-wrap .dib { font-size: 14px; letter-spacing: normal; word-spacing: normal; vertical-align: top; }
    @media screen and (-webkit-min-device-pixel-ratio: 0) { .dib-wrap { letter-spacing: -5px; } }
    .dib { display: inline-block; *display: inline; *zoom: 1; }
 </style>

示例

http://jsbin.com/enaxig

缺点

中间单元格无法根据左、右单元格以及行容器的宽度调整自身宽度。