时间戳

首页 > 解决方案 > 如何对齐谷歌地图 iframe 和一个盒子？

html - 如何对齐谷歌地图 iframe 和一个盒子？

问题描述

我想将谷歌地图框和文本弓对齐在同一行，但我不能。

我已经尝试过position: relative并更改了topandleft大小，但是尽管它们是对齐的，但底部还是出现了一个巨大的空白区域。

.ind-mapa {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  z-index: 1;
}

.resp-iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  z-index: 1;
}

.ind-media {
  float: left;
  border: 0.5px #f6e8d5 solid;
  overflow: auto;
  margin-left: 50vw;
  border-radius: 10px;
  box-shadow: 3px 3px 5px 3px #cccccc;
  z-index: 1;
}
<div class="ind-contato">
  <div class="ind-mapa" style="display: inline-block;">
    <iframe class="resp-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6150.579385265073!2d-46.595158112257735!3d-23.56282631464785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5eb2bb2e0fd7%3A0x598f639056140b1f!2sR.+do+Orat%C3%B3rio%2C+1036+-+Mooca%2C+S%C3%A3o+Paulo+-+SP%2C+03118-030!5e0!3m2!1spt-BR!2sbr!4v1548656882243"
      frameborder="0" style="border-radius: 10px; border: 0.5px #f6e8d5 solid; box-shadow: 3px 3px 5px 3px #cccccc;" align="left" allowfullscreen></iframe>

    <div class="ind-media" style="display: inline-block;">
    </div>

  </div>

标签： htmlcss

解决方案

Flex 布局可以解决问题：

.ind-mapa {
  position: relative;
  display: flex;
}

.ind-mapa>* {
  flex: 0 1 auto;
  border-radius: 10px;
  box-shadow: 3px 3px 5px 3px #ccc;
  z-index: 1;
}

.resp-iframe {
  flex: 0 0 auto;
  margin-right: 20px;
}
<div class="ind-mapa">
  <iframe class="resp-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6150.579385265073!2d-46.595158112257735!3d-23.56282631464785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5eb2bb2e0fd7%3A0x598f639056140b1f!2sR.+do+Orat%C3%B3rio%2C+1036+-+Mooca%2C+S%C3%A3o+Paulo+-+SP%2C+03118-030!5e0!3m2!1spt-BR!2sbr!4v1548656882243"
    frameborder="0" allowfullscreen></iframe>

  <div class="ind-media">
    I want to align the Google Maps box and the text bow in the same line, but I can't. I've already tried with position: relative and changed the top and left sizes, but despite they were aligned, a huge blank space took place on the bottom.
  </div>

</div>

推荐阅读