如何在网页上创建两列?

Rom*_*man 14 html css html-table

我想在我的网页上有两列.对我来说,简单的方法是使用表格:

<table>
   <tr>
      <td>
         Content of the first column.
      </td>
      <td>
         Content of the second column.
      </td>
   </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

我喜欢这个解决方案,因为,首先,它可以工作(它提供我想要的东西),它也非常简单和稳定(无论我的窗口有多大,我都会有两列.)很容易控制桌子的大小和位置.

但是,我知道人们不喜欢表格布局,据我所知,他们使用div和css代替.所以,我也想尝试这种方法.任何人都可以帮助我吗?

我想有一个易于记忆的简单解决方案(没有技巧).它也需要是稳定的(因此不会意外地发生一列在另一列之下或它们重叠或类似的情况).

Hai*_*vgi 10

我建议看看这篇文章

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

见4.将列并排特殊

为了使两列(#main和#sidebar)并排显示,我们将它们浮动,一个向左,另一个向右.我们还指定了列的宽度.

    #main {
    float:left;
    width:500px;
    background:#9c9;
    }
    #sidebar {
    float:right;
    width:250px;
   background:#c9c;
   }
Run Code Online (Sandbox Code Playgroud)

请注意,宽度之和应等于步骤3中给予#wrap的宽度.