<h1> </h1>中不同长度的布局不一致

Question

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

使用相同的外部css，页面显示方式不同（例如about about page experience page）。

我已经检查了两者之间的区别，并尝试了几个简单的解决方法，没有一个有效。通过注意到pagebody div与页面标题对齐，我将页面标题扩展为“过去体验”（example）。

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

提前致谢！

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

下的正常文档流的代码