html - 网页 CSS 在某些页面上突然显示错误

Question

我有一个模板应用于我网站上的多个页面，包括“关于”部分。本节共有三页，每页的布局相同。该模板在两个页面(about2.html 和 about1.html)上无法正常工作。奇怪的是，它非常适合 about3.html

以前这两个页面在我查看它的所有浏览器上都运行良好，直到最近我才注意到它停止正确显示，即使我没有接触模板或 CSS。

这是其中一个页面: http://thehummingbirdplace.com/about2.html

我试过重新排列不同的元素，禁用某些 CSS，并一起删除部分，但它并没有修复页面。当我删除整个 .adRight 部分或禁用其上的 float 时，文本移回顶部，但菜单选项卡没有正确排列。老实说，我不确定问题的根源是什么，所以我不能在这里提供具体的代码来关注。

Answer 1

about1.html 和 about2.html 中的 css 应该是这样的

<style style="text/css">
img { padding-top: 0px; padding-right: 15px; padding-bottom: 15px; padding-left: 0px; }
#text { width: 850px; margin-left: auto; margin-right: auto; }
.img-left { flaot:left; }
.img-right { flaot:right; }
</style>

接下来，您可以在两个文件上清除这些具有 clear 类的 div - 您不需要它们，或者至少更改您的 .clear 类，.clear { clear: both; }

<div id="header"><!-- ... --></div>
<div id="adLeft"><!-- ... --></div>
<div class="clear"></div>               <!-- take this off -->
<div id="adRight"><!-- ... --></div>
<div class="clear"></div>               <!-- take this off -->
<div id="content1"><!-- ... --></div>
<div id="footerLine1"></div>
<div id="footer"><!-- ... --></div>

将about1.html中文本 block 内唯一的img元素改成这个

<img src="_images/Donna4.png" width="197" height="193" alt="Donna Wright" class="img-left" />

将about2.html中文本 block 内唯一的img元素改成这个

<img src="_images/hummingbirdLogo.png" width="208" height="145" alt="The Hummingbird Place Logo" class="img-right;">