0

我有这个页面...http://thornwoodfinehomes.com/whatsNew.php，它在 Firefox 和 IE 7,8 & 9 中看起来不错，但在 Safari 和 Google Chrome 中却没有。

这是HTML

<div class="contentAreaAvailable">
<div class="content">
<div class="contentText">
Some Text
<img src="pics/whatsNew1.jpg" width="407" height="247" border="0" />
</div><!--contentText-->

<div class="rightContent">
<img src="pics/whatsNew2.jpg" width="332" border="0" />
<br /><br />
<img src="pics/whatsNew3.jpg" width="332" border="0" />
</div><!--rightContent-->

</div><!--content-->
<div style="text-align:center; width:100%; float:left; padding-top:15px; font-size:26px;">
<stong><em>Coming soon, some exciting opportunities in Roseland Burlington.</em></stong>
</div>

</div><!--contentAreaAvailable-->

这是CSS

.contentAreaAvailable{
    background:#000;
    padding:50px;
    border:1px solid #FFF;
    width:912px;
    height:730px;
    float:left;
}

.content{
    padding-bottom:4px;
}

.contentAvailable{
    /*padding:20px 0 0 0;*/
    width:566px;
    font-size:22px;
    float:left;
    padding-bottom:10px;
    margin:10px 0 0 0;
}

.rightContentAvailable{
    float:right;
}

我不知道为什么它在 chrome 和 safari 中这样做，任何帮助将不胜感激。谢谢

4

1 回答 1

1

我不确定你是如何设置宽度的，但左 div contentAvailable似乎有点太大了。当我将它从 566px 调整到 500px 时，右侧 div rightContentAvailable向上滑动，布局看起来很正常。（这是在 Chrome 中。）

此外，使用 Chrome 中的开发人员工具是解决布局问题的好方法。

于 2012-04-14T22:30:11.347 回答