Question

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

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

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

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

但是，加载到codepen中的p标记似乎表现得如此。

我尝试通过在h2标记和p标记的CSS中使用负边距和填充来解决此问题。但是这会产生这样的问题：不知道<p>的确切位置，并将它们与contact_us形式对齐。

正如您在我的CSS中所看到的，我之前没有在其他任何地方玩过p标记。

我在这里缺少什么？

Answer 1

你可以告诉我你的代码是非常混乱的。如果您要使用表格，为什么要为这种简单的布局进行绝对定位呢？

很可能，map，右浮动，p，没有任何浮动属性，因此位于地图后面，因为浮动元素从正常的元素流中取出。

p {float:left;}

或

p {float:right;}

应该做的伎俩，但我仍然建议你检查整个代码，制作表格布局，或者更好的css布局，不使用任何表格进行布局。

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