Question

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

我该怎么做？

Answer 1

有很多方法可以做到这一点，浮动或表格布局。桌面支持者和浮动支持者之间有一场神圣的战争。我略微倾向于桌面布局，但两者都有其优点。我会回答表格的一面：

<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

Answer 2

960网格系统具有一个非常强大而灵活的系统，用于生成固定柱或流体柱。它真的鼓励你的造型采用模块化方法，这是我个人的偏好。我通常不会使用它开箱即可生成的东西，我会修改它以适应。

http://960.gs/

以下是一个包含3列的示例：

http://www.spry-soft.com/grids/grid/?column_width=300&column_amount=3&gutter_width=20

当然，有很多很好的选择，比如雅虎网格生成器：

http://developer.yahoo.com/yui/grids/builder/

对齐3 <div>容器？</div>

2 个答案: