html - 奇怪的对齐问题

Question

我是 HTML 和 CSS 的新手，正在构建我的第一个网站。我遇到了这个非常奇怪的对齐和定位问题，让我很难过。我会很感激有人帮助我了解发生了什么。

我已将 html 和 css 加载到 codepen，以便您查看：http ://codepen.io/joe/pen/kJmeK

我还截取了问题的屏幕截图并上传以供您查看：

发生的事情是，一旦我将电话号码和地址行 1-3 包装在p标签中，它们似乎会右对齐并卡在地图下方。但是一旦我打开它们，它们就会回到原来的位置并正常运行。

但是，加载到 codepen 中的p标签似乎表现得如他们应该的那样。

我试图通过在 CSS 中为h2标签和p标签使用负边距和填充来解决这个问题。但这会产生不知道<p>s 的确切位置并将它们与 contact_us 表单对齐的问题。

正如您在我的 CSS 中看到的那样，我之前没有在p其他任何地方使用过标签。

我在这里想念什么？

Answer 1

据我所知，你的代码非常混乱。如果您要使用表格，为什么要为这个简单的布局使用绝对定位？

最有可能的是，map 具有 float right，p，没有任何 float 属性，因此位于 map 后面，因为浮动元素是从正常的元素流中取出的。

p {float:left;}

或者

p {float:right;}

应该可以解决问题，但我仍然建议您查看整个代码，并制作表格布局，或者更好的是不使用任何表格进行布局的 css 布局。

另请注意，浮动元素也应设置宽度属性，否则会收缩包装。