html - 对齐 3 个 容器？

Question

我有三个<div>容器，我想将它们与屏幕左侧的一个、中间的一个和右侧的一个对齐。容器之间留有相等的空间。

我该怎么做？

Answer 1

有很多方法可以做到这一点，使用 float 或表格布局。表格支持者和 float 支持者之间有点圣战。我稍微倾向于表格布局，但两者各有千秋。我将回答表格方面的问题:

<table style="table-layout:fixed;width:100%">
  <colgroup><col style="width:33%"/><col style="width:33%"/><col style="width:33%"/></colgroup>
  <tr>
    <td style="vertical-align:top">        
      <div style="border:1px solid red">
        column one with some long text that should wrap but still keep the column at 33%
      </div>
    </td>
    <td style="vertical-align:top">
      <div style="border:1px solid green">
        column two
      </div>
    </td>
    <td style="vertical-align:top">
      <div style="border:1px solid blue">
        column three
      </div>
    </td>
  </tr>
</table>

举个例子: http://jsbin.com/axojo