Попытка поместить iframe и div рядом с каждым, будучи отзывчивым - PullRequest
Новая
       1

Попытка поместить iframe и div рядом с каждым, будучи отзывчивым

0 голосов
/ 28 сентября 2018

Я написал некоторый код, чтобы попытаться поместить iframe карты Google слева от элемента div с текстом и кнопкой внутри нижнего колонтитула, пытаясь сделать карту и текст отзывчивыми.

У меня есть реальные проблемы с этим.Кто-нибудь может предложить что-нибудь, пожалуйста?

Вот мой HTML-код: 

.map iframe {
  align: left;
  position: relative;
  width: 100%;
  padding-top: 75%;
}

.map .openning {
  right: 0;
  float: right;
  text-align: left;
}
<div class="ftr center">
  <div class="map left">
    <iframe src="URL HERE" style="border:none;"></iframe>
    <div class="openning">
      <h3>Opening Times</h3>
      <div id="days">
        <h4>Mon-Fri:</h4>
        <h5>00:00 - 00:00</h5>
        <h4>Sat-Sun:</h4>
        <h5>00:00 - 00:00</h5>
      </div>
      <button id="donate" class="btn pink small">Donate now</button>
    </div>
  </div>
</div>

Ответы [ 3 ]

0 голосов
/ 28 сентября 2018

align - это свойство html, а не css.Попробуйте это: 

.map {
  overflow: hidden;
}

.map iframe {
float: left;
position: relative;
width: 70%;
}

.map .openning {
    float: left;
    text-align: left;
    width: 28%;
    padding: 0 1%;
}
<div class="ftr center">
        <div class="map left">
            <iframe src="URL HERE" style="border:none;"></iframe>
            <div class="openning">
            <h3>Opening Times</h3>
            <div id="days">
            <h4>Mon-Fri:</h4><h5>00:00 - 00:00</h5><h4>Sat-Sun:</h4><h5>00:00 - 00:00</h5>
            </div>
            <button id="donate" class="btn pink small">Donate now</button>
        </div>
        </div>
    </div>

Более современным решением было бы использование flexbox

0 голосов
/ 28 сентября 2018

Попробуйте использовать процентную ширину и свойства flex в css для отзывчивости. 

<body>
<div id="box">
    <h4>Mon-Fri:</h4>
    <h5>00:00 - 00:00</h5>
    <h4>Sat-Sun:</h4>
    <h5>00:00 - 00:00</h5>
  </div>
<div id="iframeWrapper">
  <iframe id="iframe">
</div>
</body>




body{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#iframeWrapper{
  position: relative;
  display: block;
  background-color: red;
  width: 50%;
 }

#box{
  position: relative;
  background-color: yellow;
  color: black;
  text-align: center;
  width: 50%;
}
0 голосов
/ 28 сентября 2018

Забудьте все правильно, плавайте и выравнивайте текст, вы смешиваете различные функции, которые не имеют ничего общего друг с другом.Вместо этого я рекомендую использовать flexbox, что делает все очень простым.Установите родительский элемент для отображения: согните и сделайте детей шириной 50%. 

.flex {
  display: flex;
}

.flex > * {
  width: 50%;
}
<div class="flex">
  <iframe src="https://example.com" style="border:none;"></iframe>
  
  <div class="right">
    <h3>Opening Times</h3>
    <div id="days">
      <h4>Mon-Fri:</h4><h5>00:00 - 00:00</h5><h4>Sat-Sun:</h4><h5>00:00 - 00:00</h5>
    </div>
    <button id="donate" class="btn pink small">Donate now</button>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...