简单的两列html布局，不使用表格 [英] Simple two column html layout without using tables

问题描述

我正在寻找一种超级简单的方法来创建一个双列格式来显示网页上的一些数据。我怎样才能达到以下格式：

I'm looking for a super easy method to create a two column format to display some data on a webpage. How can i achieve the same format as:

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

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

I'm open to HTML5 / CSS3 techniques as well.

推荐答案

<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>

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

Make sure that the sum of the colum-widths equals the wrap width. Alternatively you can use percentage values for the width as well.

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

For more info on basic layout techniques using CSS have a look at this tutorial

这篇关于简单的两列html布局，不使用表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！