编辑:谢谢大家,我已经解决了 - 这比您的建议简单得多。只需要将文本移动到“ map ”div(而不是“flex-container”div)中,并将文本放在正下方。感谢您的帮助,它让我想通了这个问题!
所以在我网站的底部,我有一个包含 Google map 的 div 部分,它下面应该是说明电子邮件地址和实际地址(公司的)的文本。
不幸的是,该文本被随机推到底部,如本网站的最底部所示:
http://website.sme.sh.s3-website-eu-west-1.amazonaws.com
下面是我认为影响它的代码-
.page {
display: inline-block;
min-height: 100vh;
background-size: cover;
background-position: center;
width: 100vw;
text-align: center;
margin: auto;
}
.flex-container {
height: 100vh;
display:flex;
align-items:center;
justify-content:center;
}
.map {
width: 60%;
height: 50%;
min-width: 20em;
}
<div class="page get-in-touch">
<div class="flex-container">
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.2326378518164!2d-0.08973764855540126!3d51.52729277953841!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761ca5df3ab397%3A0xb76b90b168bccd4d!2sSmesh!5e0!3m2!1sen!2suk!4v1528291922909" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
<a href="mailto:hello@sme.sh" style="color: #000;"><u>hello@sme.sh</u></a> <a style="color: #000;"> | 20 East Road, London, N1 6AD</a>
</div>
我的代码中是否遗漏了什么?
最佳答案
这是由于您的 <a href="mailto:"></a>
标记和您的地址标记在 flex-container
之外类(class)。
要修复,请将两个 <a>
flex-container
内的标签上课并按您喜欢的方式放置它们。
或者,减少 height
你的flex-container
类
关于html - 文本卡在 Div 底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50738512/