gpt4 book ai didi

html - 为什么

元素会跳出 div 出现在下一行?

转载 作者:太空宇宙 更新时间:2023-11-04 12:30:07 25 4
gpt4 key购买 nike

元素“跳出”其 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;
}

最佳答案

我不完全确定问题出在哪里,但您的 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

关于html - 为什么 <p> 元素会跳出 div 出现在下一行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27727668/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com