html - 在此 Google Maps map 旁边添加图片

我想在此 Google Maps map 旁边添加一张图片:https://imgur.com/XoihZ8g 但我不确定如何,这是我的代码:

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

.flex-container>div {
  width: 50%;
}
<section class="contact-us" id="contact-section">
  <div class="contact-us-bgimage grid-margin">
    <div class="pb-4">
      <h4 class="px-3 px-md-0 m-0" data-aos="fade-down">¿Tiene alguna duda?</h4>
      <h4 class="pt-1" data-aos="fade-down"> ឵឵ </h4>
    </div>
    <div data-aos="fade-up">
      <button class="btn btn-rounded btn-outline-danger" data-toggle="modal" data-target="#exampleModal">Contáctanos</a>
          </button>
    </div>
  </div>
  <div class="flex-container">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3901.165195727537!2d-77.02086168507019!3d-12.100840946203745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105c87176d57413%3A0x91785bfebf4bb5dc!2sAv.%20Rep%C3%BAblica%20de%20Panam%C3%A1%203635%2C%20San%20Isidro%2015036!5e0!3m2!1sen!2spe!4v1652844514162!5m2!1sen!2spe"
      width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    <img src="https://cdn.discordapp.com/attachments/972188609815912449/976353955137343548/final_edificio.png" height="450" alt="">
  </div>
</section>

我想要这里的图片:https://imgur.com/wAeAtq8 希望有人可以帮助我,谢谢!

回答1

flex-container 上使用 justify-content: space-around;

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.flex-container>div {
  width: 50%;
}
<section class="contact-us" id="contact-section">
  <div class="contact-us-bgimage grid-margin">
    <div class="pb-4">
      <h4 class="px-3 px-md-0 m-0" data-aos="fade-down">¿Tiene alguna duda?</h4>
      <h4 class="pt-1" data-aos="fade-down"> ឵឵ </h4>
    </div>
    <div data-aos="fade-up">
      <button class="btn btn-rounded btn-outline-danger" data-toggle="modal" data-target="#exampleModal">Contáctanos</button>
    </div>
  </div>
  <div class="flex-container">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3901.165195727537!2d-77.02086168507019!3d-12.100840946203745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105c87176d57413%3A0x91785bfebf4bb5dc!2sAv.%20Rep%C3%BAblica%20de%20Panam%C3%A1%203635%2C%20San%20Isidro%2015036!5e0!3m2!1sen!2spe!4v1652844514162!5m2!1sen!2spe"
      width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    <img src="https://cdn.discordapp.com/attachments/972188609815912449/976353955137343548/final_edificio.png" height="450" alt="">
  </div>
</section>

您还有一个随机的额外关闭 </a> 我删除了它以使标记有效。

相似文章

javascript - 2个脚本不能一起工作

我有一个脚本可以在页面刷新时为我生成一个新图像。现在我想添加一个自定义的googlemap。但是这两个不能一起工作,它是一个或另一个取决于脚本的顺序。https://paris.communauto....

最新文章