Html 如何在网页上创建两列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4538447/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create two columns on a web page?
提问by Roman
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.
我喜欢这个解决方案，因为首先，它有效（它提供了我想要的东西），它也非常简单和稳定（无论我的窗口有多大，我总是有两列）。很容易控制桌子的大小和位置。
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?
但是，我知道人们不喜欢 table-layout，据我所知，他们使用 div 和 css 代替。所以，我也想尝试这种方法。有人可以帮我吗？
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).
我想要一个容易记住的简单解决方案（没有技巧）。它还需要稳定（这样就不会意外地发生一列在另一列之下或它们重叠或类似的情况）。
回答by Haim Evgi
i recommend to look this article
我建议看这篇文章
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
http://www.456bereasttreet.com/lab/developing_with_web_standards/csslayout/2-col/
see 4. Place the columns side by sidespecial
见4. 并排放置特殊的列
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 和#sidebar）并排显示，我们将它们浮动，一列向左，另一列向右。我们还指定了列的宽度。
#main {
float:left;
width:500px;
background:#9c9;
}
#sidebar {
float:right;
width:250px;
background:#c9c;
}
Note that the sum of the widths should be equal to the width given to #wrap in Step 3.
请注意，宽度的总和应等于在步骤 3 中给 #wrap 的宽度。
回答by PseudoNinja
I agree with @haha on this one, for the most part. But there are several cross-browser related issues with using the "float:right" and could ultimately give you more of a headache than you want. If you know what the widths are going to be for each column use a float:left on both and save yourself the trouble. Another thing you can incorporate into your methodology is build column classes into your CSS.
在大多数情况下，我同意 @haha 的观点。但是使用“float:right”有几个跨浏览器相关的问题，最终可能会给你带来比你想要的更多的麻烦。如果您知道每列的宽度将是多少，请在两者上使用 float:left 并省去麻烦。您可以纳入您的方法的另一件事是将列类构建到您的 CSS 中。
So try something like this:
所以尝试这样的事情：
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
HTML
<div class="col-wrapper">
<div class="col col-670">[Page Content]</div>
<div class="col col-250">[Page Sidebar]</div>
</div>
回答by CTSchmidt
I found a real cool Grid which I also use for columns. Check it out Simple Grid. Wich this CSS you can simply use:
我发现了一个非常酷的 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>
I use it for all my projects.
我将它用于我所有的项目。
回答by haha
Basically you need 3 divs. First as wrapper, second as leftand third as right.
基本上你需要3个div。第一个wrapper，第二个left，第三个right。
.wrapper {
width:500px;
overflow:hidden;
}
.left {
width:250px;
float:left;
}
.right {
width:250px;
float:right;
}
Example how to make 2 columns http://jsfiddle.net/huhu/HDGvN/
示例如何制作 2 列http://jsfiddle.net/huhu/HDGvN/
CSS Cheat Sheetfor reference
CSS 备忘单供参考
回答by sproketboy
The simple and best solution is to use tables for layouts. You're doing it right. There are a number of reasons tables are better.
简单且最好的解决方案是使用表格进行布局。你做得对。表更好的原因有很多。
- They perform better than CSS
- They work on all browsers without any fuss
- You can debug them easily with the border=1 attribute
- 它们的性能比 CSS 好
- 它们适用于所有浏览器，无需大惊小怪
- 您可以使用 border=1 属性轻松调试它们
