主页 / 问题 / 1367514
Accepted
Vladimir Zhidelev
Asked:2022-05-31 16:49:38 +0000 UTC2022-05-31 16:49:38 +0000 UTC

如何像屏幕截图中那样并排排列这些块？

  • 772

地图和街区不希望处于同一水平线上，好吧，根本就没有。在此处输入图像描述

<html>
<head></head>
<body>
<div style="float: left;">
<div style="line-height: 1.4; padding-left:5%; font-family: Arial, Helvetica, sans-serif; ">
   <strong style="font-size: 40px;">Наши контакты</strong> </br>
    <a style=" font-size:18px; font-weight: 300; color: #1a1919; text-decoration: none;" href="tel:+79254127901">+7 925 412-79-01</a></br>
    <a style=" font-size:18px; font-weight: 300; color: #1a1919; text-decoration: none;" href="mailto:klubpoedinok@yandex.ru">klubpoedinok@yandex.ru</a></br>
    Новоясеневский проспект д. 1, к. 2</br>
    (2 минуты от метро Теплый стан)
</div>

<div style="float:left; padding-left:60%; padding-bottom: 5%;">
  <iframe  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2253.002470881709!2d37.50734571596029!3d55.619372709742464!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b552ab716c6aeb%3A0x65ab8a837dff83ec!2sNovoyasenevskiy%20Prospekt%2C%201%D0%BA2%2C%20Moskva%2C%20117574!5e0!3m2!1sen!2sru!4v1635763963898!5m2!1sen!2sru" width="650" height="500" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</body>
</html>

javascript

1 个回答

  1. Best Answer

    阅读有关Flexbox以及如何进行响应式布局的信息。

    我会这样做：

    body {
  font-family: Arial, Helvetica, sans-serif;
}

.max-wrap {
  display: block;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}

.block {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.block__left,
.block__right {
  display: block;
  width: 50%;
}

.block__left {
  margin-right: 20px;
}

.block__left h2 {
  margin: 0 0 1em;
}

.block__left p {
  color: #444;
  margin: 0;
}

.block__left p:not(:last-child) {
  margin-bottom: .5em;
}

.block__left p a {
  color: inherit;
  text-decoration: none;
}

.block__right .iframe-ratio {
  display: block;
  width: 100%;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.25);
}

.iframe-ratio {
  display: block;
  width: 100%;
  position: relative;
}

.iframe-ratio::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-top: 61.54%;
}

.iframe-ratio iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
}
    <div class="max-wrap">
  <div class="block">
    <div class="block__left">
      <h2>Наши контакты</h2>
      <p>
        <a href="tel:+79254127901">+7 925 412-79-01</a>
      </p>
      <p>
        <a href="mailto:klubpoedinok@yandex.ru">klubpoedinok@yandex.ru</a>
      </p>
      <p>Новоясеневский проспект д. 1, к. 2</p>
      <p>(2 минуты от метро Теплый стан)</p>
    </div>

    <div class="block__right">
      <div class="iframe-ratio">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2253.002470881709!2d37.50734571596029!3d55.619372709742464!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b552ab716c6aeb%3A0x65ab8a837dff83ec!2sNovoyasenevskiy%20Prospekt%2C%201%D0%BA2%2C%20Moskva%2C%20117574!5e0!3m2!1sen!2sru!4v1635763963898!5m2!1sen!2sru" allowfullscreen="" loading="lazy"></iframe>
      </div>
    </div>
  </div>
</div>

    • 1

相关问题