Html 如何在不使用表格的情况下垂直划分网页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13289632/
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 Vertically Divide A Web Page Without Using A Table?
提问by Jan Tacci
I read somewhere (on Stack Overflow as a matter of fact!) that it's a bad idea to use tables to layout pages in html.
我在某处（实际上是在 Stack Overflow 上！）读到，使用表格在 html 中布局页面是一个坏主意。
I have an HTML page that needs to be "divided" down the middle with some content going on the left and some content going on the right. At fist I would have thought to use nested tables with each of their widths being 50%. Can I do the same thing using div? Or some other html construct?
我有一个 HTML 页面，需要从中间“划分”一些内容在左边，一些内容在右边。一开始我会想到使用嵌套表格，每个表格的宽度都是 50%。我可以使用div做同样的事情吗？或者其他一些html结构？
回答by Akhil
<div style="float:left; width:50%;">
Left <!-- Set Div As your requirement -->
</div>
<div style="float:left; width:50%;">
Right <!-- Set Div As your requirement -->
</div>
回答by George
This should achieve (very basically) what you want.
这应该（基本上）实现您想要的。
body,html{height:100%}
div.mainLayout{float:left;width:50%}
div.clearFlt{clear:both}
<html>
<head>
</head>
<body>
<div class="mainLayout">LeftContent
<div class="clearFlt"></div>
</div>
<div class="mainLayout">LeftContent
<div class="clearFlt"></div>
</div>
</body>
</html>
回答by Michel Feldheim
One common way for a base layout is to wrap your areas into div containers. Those containers are positioned and sized using CSS.
基本布局的一种常见方法是将您的区域包装到 div 容器中。这些容器使用 CSS 定位和调整大小。
回答by Ronaldo Nazarea
If you'll inspect the stackoverflow page (if using firefox, right-click on any element on the sidebar on the right, and select 'Inspect Element'), you'll see that the sidebar is a div element with a float attribute. No tables on the Inspector stack at the bottom of the page!
如果您要检查 stackoverflow 页面（如果使用 firefox，请右键单击右侧边栏上的任何元素，然后选择“检查元素”），您会看到边栏是一个具有浮动属性的 div 元素。页面底部的 Inspector 堆栈上没有表格！
