Question

元素从其div中“跳出”并在div之外的下方出现一行。元素浮动正确。有两个div元素，一个拿着徽标和商业地址，下一个拿着一个下拉菜单和欢迎声明。下拉菜单向左浮动。我没有包含菜单的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确实存在一些问题：

<div id="head_2">尚未关闭，但我猜测这只是在您的示例中而不是您的实际代码中。
您有一个开放的<p>而不是关闭

<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

此外，您需要清除您可能或可能不会做的浮子。 #contain似乎是您的包装器，因此如果它实际上是overflow: hidden和#head_1

#head_2

FIDDLE

为什么<p>元素跳出div并出现在下面的下一行？</p>

1 个答案: