网站加载到右边,直到完成,然后中心

Question

Stackoverflow上还有2个其他线程遇到此问题.既不适用于我.一个是关于javascript的东西.我在浏览器上禁用了javascript,仍然这样做了.

另一个是adsense横幅,我在这个页面上没有.

有人可以告诉我为什么这个加载到右边,然后在页面完全加载时居中？

谢谢!

http://www.halotracker.com/Reach/TrueSkillLB.aspx?GameType=Competitive&Playlist=13

Answer 1

这是因为表中的宽度设置为100%,其中两列用*来确定填充.*字符告诉表确定剩余的宽度并用表填充它.所以会发生什么是浏览器渲染第一个*减去中心列的固定宽度.在定心发生之前,它甚至不会渲染第三列.您可以使用firebug查看此信息,并在仍然与右侧对齐时停止加载.

<div class="SiteBody">
 <table width="100%">
  <tbody>
   <tr>
    <td width="*"></td>
    <td width="1062"></td>
    <td width="*"></td>
   </tr>
  </tbody>
 </table>
</div>

我会说这一次,因为很多人可能会跳这个.你不应该使用表来设置布局这是不好的做法,它可以给你带来像你所看到的问题.那就是说,我的良心很清楚.

您可以删除第一个和第三个TD,删除宽度100%并在父容器中设置背景.在我看来,这将是处理它的最佳方式.将边距设置为0,自动,这应该为您提供您想要的一切.

<div class="SiteBody">
 <div class="SiteMiddle">//site content</div>
</div>

<style>
 .SiteBody { background: transparent url(image of background) }
 .SiteMiddle { width:1062px; margin: 0, auto; }
</style>

或者这可能是因为这层的div的最佳途径,并允许您设置背景的左侧和右侧,还设置了中心的内容与正确的宽度

<div class="SiteBody">
 <div class="SiteLeft">
  <div class="SiteRight">
   <div class="SiteMiddle">//site content</div>
  </div>
 </div>
</div>

<style>
 .SiteBody {  }
 .SiteLeft { background: transparent url(image of left background) no-repeat left top; }
 .SiteRight { background: transparent url(image of left background) no-repeat right top; }
 .SiteMiddle { margin: 0, auto; width: 1062px; }
</style>

Answer 2

嗯，很难说，但这可能是因为右边的方框有“position:absolute”

也许您应该删除以主要内容为中心的表格，以免浏览器对页面上每个元素的位置感到困惑。

试试这个 HTML：

<div class="SiteBody">
<!-- remove table stuff here -->
  <div class="container">
    <!-- Your content -->
  </div>
<!-- remove table stuff here -->
</div>

使用这个CSS：

.SiteBody {text-align:center;}
.container {width:1062px;margin:0 auto;text-align:left;position:relative;}