文本粘在 Div 底部

Question

编辑：谢谢大家，我已经解决了 - 这是一个比你的建议更简单的修复。只需要将文本移动到“maps”div（而不是“flex-container”div）中，然后将文本放在正下方。感谢您的帮助，这让我想到了问题！

所以在我网站的底部，我有一个 div 部分，其中包含一个 Google 地图，在它下面应该是说明电子邮件地址和实际地址（企业的）的文本。

不幸的是，该文本被随机推到底部，如本网站的最底部所示：

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>

我的代码中是否遗漏了什么？

Answer 1

这是由于您的<a href="mailto:"></a> 标签和您的地址标签不在flex-container 类。

要修复，请将两个 <a> 标记放在 flex-container 类中，并按照您的喜好放置它们。

或者，减少 flex-container 类的 height

Answer 2

试试这个...

	
 
 .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>
 <p><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></p>
        </div>  
   
</div>

Answer 3

实际上，这不是随机的。文本应该在那里，因为您在 <a> 标记之前有一个 flex-container。在flex-container 中，height 中只有 50% 的地图，所以当你有不同的屏幕/分辨率时，它会让你感觉很随意。

您可以将<a> 移动到flex-container 中，也可以在height 中提供地图类100%

.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: 100%;
    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>

Answer 4

只需将 .map 的高度和宽度设置为 100% 并使用填充来填充地图周围的空白。

说明：

主要问题是地图位于一个弹性容器中，该容器具有 定义的高度和地图只使用了 60% 的高度。那是 地图和文本之间空白的原因。

有任何问题吗？ :)

编辑 My Bad 唯一真正需要的 Step 是 .map 的高度和宽度。 我删除了其他说明以避免不必要的混乱。