html - 为什么 <p> 元素会跳出 div 出现在下一行？

Question

元素“跳出”其 div 并出现在 div 下方的一行之外。元素向右浮动。有两个 div 元素，一个包含 Logo 和公司地址，下一个包含下拉菜单和欢迎声明。下拉菜单向左浮动。我没有包含菜单的 html。直到今天才发生这种情况，但我不知道我改变了什么导致了这种情况。我没有对菜单进行任何更改。感谢帮助。新年快乐!

 <div id="head_1">
    <img src="images/Logos/Acts4_Logo.png"/>
   <p> P.O. Box 4524 </br>
       Waterville </br>
       </br>
       (444) 444 - 4444 </br>
        www.Acts.org 
   <p>
 </div>

 <!-- menu and statement -->
 <div id="head_2">
   <p>Keeping Families Warm in Winter</p>

 #contain {  /* wrapper for all content*/
    margin-right: 17%;
    margin-left: 10%;
    background-color: white;
    padding: 0px 10px 1px 10px;
 }

#content {  /* all text and photos */
   margin-top: 20px;
   background-color: white;
}

#head_1 p {     /* Acts address */
  float: right;
  text-align: right;
  font-size: 11pt;
}


#head_2 p {  /* keep fams warm */
  float: right;
  font-family: "cursive standard";
  font-size: 26pt;
}

Answer 1

我不完全确定问题出在哪里，但您的 html 确实有一些问题:

1. <div id="head_2">没有关闭，但我猜这只是在您的示例中遗漏了，而不是在您的实际代码中。

2. 您有一个打开的 <p>而不是关闭

3. <br/>标签关闭错误(你有 </br> :

   <div id="head_1">
     <img src="images/Logos/Acts4_Logo.png"/>
     <p> P.O. Box 4524 </br> <---------------------#3 all of these should be <br/>
     Waterville </br>
     </br>
     (444) 444 - 4444 </br>
     www.Acts.org 
     <p> <--------------#2 should be </p>
   </div>
   
   <!-- menu and statement -->
   <div id="head_2">
     <p>Keeping Families Warm in Winter</p>
   </div> <----- #1 Missing
   

此外，您还需要清除 float ，您可能会或可能不会这样做。看来 #contain是你的包装器，所以你可以添加 overflow: hidden如果它实际上是 #head_1 的父级和 #head_2

FIDDLE