我正在尝试在这两条消息下方添加页脚图像。底部是透明的,我在“消息 2”下方添加的任何内容都在后面而不是下方,如何继续在这些下方进行编辑?
理论上甚至只添加一些像
这样的文本<p>hello</p>
应该出现在下面。它显示在消息 2 div 的后面,不允许我在下面实际编辑,它在后面编辑。我将如何解决这个问题?
<style>
body {
display: flex;
height: 100vh;
margin: 0;
flex-direction: column;
}
.message1 {
flex: 1;
align-items: center;
display: flex;
max-height: 100px;
background-color: #f0f0f0;
}
.message2 {
flex: 1;
align-items: center;
display: flex;
max-height: 100px;
background-color: #3a3a3a;
}
a {
text-decoration: none;
color: ##6d1a76;
}
</style>
<style>
.messagetext {
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 20px;
padding: 0px;
</style>
<div class="message1">
<div class="messagetext">
<p class="Roboto"><a href="URL">URL TEXT</a></p>
</div>
</div>
<div class="message2">
<div class="messagetext">
<font size="3" color="#ffffff">
<p class="Roboto">TEXT</p>
</font>
</div>
<div>
<br>
<style>
.footer {
position: fixed;
bottom: 0%;
width: 100%;
}
</style>
<!--Footer-->
<div class="footer" src="FOOTER IMAGE" width="80%" alt="Footer"> </div>
<br>
如果您尝试在下方添加文本,它只会显示在现有文本旁边,我需要它显示在下方。
最佳答案
你的页脚有 position: fixed
和 bottom: 0%;
,所以它在页面的底部(我给了它一个高度并将它的背景设为黄色为了使其可见,顺便说一句,页脚 DIV 中的 src
属性不会生成图像)。
position: fixed
也将其从文档流的其余部分中移除,因此无论页脚*之后*如何,都将简单地跟在页脚之前之后。
此外,您的代码中还有一些小错误/拼写错误 - HTML 和 CSS 规则中的未闭合标记。我将它拆分为 CSS 和 HTML,以便在下面的代码片段中更清晰
body {
display: flex;
height: 100vh;
margin: 0;
flex-direction: column;
}
.message1 {
flex: 1;
align-items: center;
display: flex;
max-height: 100px;
background-color: #f0f0f0;
}
.message2 {
flex: 1;
align-items: center;
display: flex;
max-height: 100px;
background-color: #3a3a3a;
}
a {
text-decoration: none;
color: #6d1a76;
}
.messagetext {
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 20px;
padding: 0px;
}
.footer {
position: fixed;
bottom: 0%;
width: 100%;
height: 100px;
background: #ffffaa;
}
<div class="message1">
<div class="messagetext">
<p class="Roboto"><a href="URL">URL TEXT</a></p>
</div>
</div>
<div class="message2">
<div class="messagetext">
<font size="3" color="#ffffff">
<p class="Roboto">TEXT</p>
</font>
</div>
<!--Footer-->
<div class="footer" src="FOOTER IMAGE" width="80%" alt="Footer"> </div>
<p>THIS IS BELOW THE FOOTER IN THE HTML CODE, but above it in the document flow</p>
关于html - DIV 下方将不再显示任何内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47823519/