html - 不同长度的布局不一致

Question

我正在建立我的网站并遇到了这个棘手的问题：

使用相同的外部 css，页面显示不同（例如关于页面和体验页面）。

我已经检查了两者之间的区别并尝试了几种简单的解决方法，但都没有奏效。通过注意到 pagebody div 与页面标题对齐，我将页面标题扩展为“Past Experience”（示例）。

你们中的任何人都可以帮助我找出真正的问题吗？样式表有问题吗？

提前致谢！

Answer 1

您的问题可以通过添加以下内容来解决：

#pagebody{clear: left;}

Answer 2

只需添加css

#headline {
    float: left;
    width:100%;

}

结果

Answer 3

只需将其添加到您的 CSS 中：

#headline { overflow:hidden; }

您的问题是您的浮动导航和徽标没有被清除/包含，因此浮动之后的元素可以在下一行继续并返回正常的文档流。

此外，当您使用浮动时，最好width在浮动元素上设置一个集合。宽度可以是任何单位px，em或%

您也可以这样做：

#pagebody { clear:both; } 

这是清除左右浮动并返回#pagebody正常文档流的代码#headline