Question

我在某处读过（事实上是在Stack Overflow上！）使用表格在html中布局页面是一个坏主意。

我有一个HTML页面需要在中间“划分”，左边有一些内容，右边有一些内容。首先，我会想到使用嵌套表，每个宽度为50％。我可以使用 div 做同样的事情吗？还是其他一些html构造？

Answer 1

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

Answer 2

这应该（非常基本）达到你想要的效果。

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>

Answer 3

基本布局的一种常见方法是将您的区域包装到div容器中。使用CSS定位和调整这些容器。

Answer 4

如果您要检查stackoverflow页面（如果使用firefox，右键单击右侧边栏上的任何元素，并选择'Inspect Element'），您将看到侧边栏是一个带有浮动属性。页面底部的Inspector堆栈上没有表格！

如何在不使用表的情况下垂直划分网页？

4 个答案: