css - 不使用表格的简单两列 html 布局

Question

我正在寻找一种 super 简单的方法来创建两列格式以在网页上显示一些数据。我怎样才能实现与以下格式相同的格式:

<table>
    <tr>
        <td>AAA</td>
        <td>BBB</td>
    </tr>
</table>

我也对 HTML5/CSS3 技术持开放态度。

Answer 1

<style type="text/css">
#wrap {
   width:600px;
   margin:0 auto;
}
#left_col {
   float:left;
   width:300px;
}
#right_col {
   float:right;
   width:300px;
}
</style>

<div id="wrap">
    <div id="left_col">
        ...
    </div>
    <div id="right_col">
        ...
    </div>
</div>

确保列宽的总和等于换行宽度。或者，您也可以使用宽度的百分比值。

有关使用 CSS 的基本布局技术的更多信息，请查看此 tutorial