如何在网页上创建两列? [英] How to create two columns on a web page?

问题描述

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

I want to have two columns on my web page. For me the simples way to do that is to use a table:

<table>
   <tr>
      <td>
         Content of the first column.
      </td>
      <td>
         Content of the second column.
      </td>
   </tr>
</table>

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

I like this solution because, first of all, it works (it gives exactly what I want), it is also really simple and stable (I will always have two columns, no matter how big is my window). It is easy to control the size and position of the table.

但是，我知道人们不喜欢表格布局，据我所知，他们改用div和CSS.因此，我也想尝试这种方法.有人可以帮我吗?

However, I know that people do not like the table-layout and, as far as I know, they use div and css instead. So, I would like also to try this approach. Can anybody help me with that?

我想有一个简单易记的解决方案(没有技巧).它还需要保持稳定(这样一来，就不会偶然地使一列在另一列的下面或它们重叠或类似的东西).

I would like to have a simple solution (without tricks) that is easy to remember. It also needs to be stable (so that it will not accidentally happen that one column is under another one or they overlap or something like that).

推荐答案

我建议看这篇文章

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

请参阅 4.将列并排放置特殊

要使两列(#main和#sidebar)并排显示，请浮动，向左浮动，另一向右.我们还指定了列的宽度.

To make the two columns (#main and #sidebar) display side by side we float them, one to the left and the other to the right. We also specify the widths of the columns.

    #main {
    float:left;
    width:500px;
    background:#9c9;
    }
    #sidebar {
    float:right;
    width:250px;
   background:#c9c;
   }

请注意，宽度的总和应等于在第3步中指定给#wrap的宽度.

Note that the sum of the widths should be equal to the width given to #wrap in Step 3.

这篇关于如何在网页上创建两列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！