Question

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

所以在我网站的底部，我有一个带有谷歌地图的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>

我的代码中是否有遗漏的内容？

Answer 1

这是由于您的<a href="mailto:"></a>标记和您的地址标记位于flex-container类之外。

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

或者，减少height班级的flex-container

Answer 2

试试这个......

＆＃13;

	
 
 .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;
}

＆＃13;

<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>

＆＃13;

Answer 3

实际上，它不是随机的。由于您在flex-container标记之前有<a>，因此该文本应该在那里。在flex-container内，50%中只有地图height，因此当您有不同的屏幕/分辨率时，它会让您感觉像是随机的。

您可以在<a>内移动flex-container，也可以在100%

中提供地图类height

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 4

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

<强>解释

主要问题是地图是在一个有一个的弹性容器中   定义的高度和地图仅使用高度的60％。那＆＃39; S   地图与文字之间空格的原因。

有问题吗？：）

修改我的坏，唯一真正的步骤是.map的高度和宽度。我删除了其他说明以避免无意识的混淆。

文字粘在Div的底部

4 个答案: