Question

我在页面布局方面遇到了麻烦。我不得不使用表和div的混合。页脚和包含表格的div会出现问题。页脚显示在div上方但在html中它是我在“main_container”中的最后一个元素。

<style>
 #sidebar {
            position: relative;
            display: block;
            float: left;
            width: 30%;
          }
 #TblContain {
               position: relative;
               display: block;
               float: right;
               width: 70%;
             }

 #footer {
           position: relative;
           width: 100%;
           display: block;
         }
</style>
<div id="main_container">
<div id="head">
</div>

<div id="nav_bar">
</div>

<div id="content">
<div id="sidebar">
</div>
<div id="TblContain">
 <table></table>
</div><!--endTblContain-->
</div><!--endContent-->

<div id="footer">
</div><!--endFooter-->
</div><!--endMainContain-->

Answer 1

如果清楚：左;不起作用，尝试添加明确：两者;在css中的页脚。

Answer 2

这比试图浮动div更容易。此外，它还允许您的页面重新调整大小，并且您的个人内容区域可以滚动。

<html>
  <body style="overflow:hidden;">
     <div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;right:0px;background-color:#FF0000;"></div>
     <div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0px; right:200px; bottom:50px;background-color:#00FF00;"></div>
     <div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0px; bottom:50px;background-color:#0000FF;"></div>
     <div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px;right:0px;background-color:#FFFF00;"></div>
  </body>
</html>

http://jsbin.com/ugoli3/2/edit

Answer 3

尝试添加：

clear: left;

到页脚。

Html渲染元素乱序

3 个答案: