如何在网页上创建两个列？答案

【问题标题】：How to create two columns on a web page?如何在网页上创建两个列？
【发布时间】：2011-05-31 02:54:48
【问题描述】：

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

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

我喜欢这个解决方案，因为首先，它有效（它提供了我想要的东西），它也非常简单和稳定（我总是有两列，不管我的窗口有多大）。很容易控制桌子的大小和位置。

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

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

【问题讨论】：

这是互联网上最常见的问题之一。 Google 提供了数百种解决方案。

标签： html css html-table

【解决方案1】：

参见4。并排放置列特殊

为了让两列（#main 和 #sidebar）并排显示，我们将它们浮动，一列在左侧，另一列在右侧。我们还指定了列的宽度。

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

请注意，宽度的总和应等于第 3 步中给 #wrap 的宽度。

【讨论】：

【解决方案2】：

简单且最佳的解决方案是使用表格进行布局。你做对了。表格更好的原因有很多。

它们的性能优于 CSS
它们可以在所有浏览器上运行而无需大惊小怪
您可以使用border=1 属性轻松调试它们

【讨论】：

这是违反标准的，您的解决方案被硬编码到 html 文件中。当您拥有 1000 多个网站时，尝试将一列的宽度更改为 5px。您将不得不花费一生来做这件事，而在 css 中则需要 10 秒。不过，我在某种程度上同意你的看法。几年前我使用表格没有任何问题，一开始我发现 css 有点反直觉。另外，所有的浏览器仍然以不同的方式呈现 css，而且 css 仍然是一个普遍的问题。
这是投票率最高的 [css] 问题：stackoverflow.com/questions/83073/…。去阅读它，当你能反驳所有的论点时再回来，去写一篇关于它们的博客文章。 Stack Overflow 不是咆哮、尖叫或诅咒的地方——这个答案没有回答 OP 的问题，这就是它被否决的原因。期间。

【解决方案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供参考

【讨论】：

【解决方案4】：

我在很大程度上同意@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>

【讨论】：

【解决方案5】：

我发现了一个非常酷的 Grid，我也将它用于列。看看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>

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

【讨论】：