我正在尝试在这两条消息下添加页脚图像。底部是透明的,我在“消息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>
如果您尝试在其下方添加文字,则只显示现有文字旁边的文字,我需要在下面显示。
答案 0 :(得分:1)
您的页脚有position: fixed
和bottom: 0%;
,因此它位于页面底部(我给它一个高度并将其背景设为黄色以使其可见,BTW src
页脚DIV中的属性不会生成图像。
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;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
您错过了结束div
并且最好将Flex项目放在他们自己的容器中:
body {
height: 100vh;
margin: 0;
}
.container {
display: flex;
height: 200px;
flex-direction: column;
}
.message1 {
flex: 1;
align-items: center;
display: flex;
background-color: #f0f0f0;
}
.message2 {
flex: 1;
align-items: center;
display: flex;
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%;
}
&#13;
<div class="container">
<div class="message1">
<div class="messagetext">
<p class="Roboto"><a href="URL">URL TEXT</a></p>
</div>
</div>
<div class="message2">
<div class="messagetext">
<p class="Roboto">TEXT</p>
</div>
</div>
</div>
<br>
<p>lorem</p>
<!--Footer-->
<div class="footer" src="FOOTER IMAGE" alt="Footer"> </div>
<br>
&#13;