Question

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

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

我喜欢这个解决方案，因为，首先，它可以工作（它完全符合我想要的），它也非常简单和稳定（无论我的窗口有多大，我都会有两列。）可以很容易地控制桌子的大小和位置。

但是，我知道人们不喜欢表格布局，据我所知，他们使用div和css代替。所以，我也想尝试这种方法。有人可以帮我吗？

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

Answer 1

我建议看看这篇文章

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

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

Answer 2

在大多数情况下，我同意@haha的观点。但是使用“float：right”有几个跨浏览器相关的问题，最终会给你带来比你想要的更多的麻烦。如果您知道每列的宽度是多少，请使用float：left并保留麻烦。您可以在方法中加入的另一件事是在CSS中构建列类。

所以尝试这样的事情：

CSS

.col-wrapper{width:960px; margin:0 auto;}
.col{margin:0 10px; float:left; display:inline;}
.col-670{width:670px;}
.col-250{width:250px;}

HTML

<div class="col-wrapper">
    <div class="col col-670">[Page Content]</div>
    <div class="col col-250">[Page Sidebar]</div>
</div>

Answer 3

基本上你需要3个div。首先是wrapper，第二个是left，第三个是right。

.wrapper {
 width:500px;
 overflow:hidden;
}

.left {
 width:250px;
 float:left;
}

.right {
 width:250px;
 float:right;
}

如何制作2列http://jsfiddle.net/huhu/HDGvN/

的示例

CSS Cheat Sheet以供参考

Answer 4

我找到了一个非常酷的网格，我也用它来做列。看看Simple Grid。你可以简单地使用这个CSS：

<div class="grid">
    <div class="col-1-2">
       <div class="content">
           <p>...insert content left side...</p>
       </div>
    </div>
    <div class="col-1-2">
       <div class="content">
           <p>...insert content right side...</p>
       </div>
    </div>
</div>

我将它用于我的所有项目。

Answer 5

简单而最好的解决方案是使用表格进行布局。你说得对。表格更好的原因有很多。

他们的表现优于CSS
他们可以毫不费力地在所有浏览器上工作
您可以使用border = 1属性轻松调试它们

如何在网页上创建两列？

5 个答案: