iFrames не реагируют бок о бок (разрыв линейного блока при уменьшении экрана) - PullRequest
Новая
       1

iFrames не реагируют бок о бок (разрыв линейного блока при уменьшении экрана)

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

Я использую два iframes, и я удалил все padding или margin из своего кода.Они оба ломаются (они больше не выровнены), когда экран становится маленьким, и я до сих пор не могу понять, почему.

body{
    background:#0d3852;
    margin:0;
    padding:0;
}
iframe{
    background:#ccc;
    border:0;
    margin:0;
    padding:0;
}
.box { 
    margin:0;
    padding:0;
    display:inline-block;
    width:49.77%;
}
<!DOCTYPE html>
<html>
    <body>
        <div class="box">
                <iframe src="https://open.spotify.com/embed/user/radomer/playlist/4S4lTBokwOjIvEHkz3klTj" width="100%" height="500" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
        </div>
        <div class="box">
            <iframe src="https://open.spotify.com/embed/user/radomer/playlist/4S4lTBokwOjIvEHkz3klTj" width="100%" height="500" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
        </div>    
    </body>
</html

Ответы [ 2 ]

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

Используйте display:flex; вместо display:inline-block;

body {
  background: #0d3852;
  margin: 0;
  padding: 0;
}

iframe {
  background: #ccc;
  border: 0;
  margin: 0;
  padding: 0;
}

.box {
  margin: 0;
  padding: 0;
  display: flex;
  width: 49.77%;
}
<!DOCTYPE html>
<html>

<body>
  <div class="box">
    <iframe src="https://open.spotify.com/embed/user/radomer/playlist/4S4lTBokwOjIvEHkz3klTj" width="100%" height="500" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
  </div>
  <div class="box">
    <iframe src="https://open.spotify.com/embed/user/radomer/playlist/4S4lTBokwOjIvEHkz3klTj" width="100%" height="500" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
  </div>
</body>
</html
0 голосов
/ 28 ноября 2018

Поплавок исправит проблему.Пожалуйста, смотрите обновления стилей .box набора правил .. 

body{
    background:#0d3852;
    margin:0;
    padding:0;
}
iframe{
    background:#ccc;
    border:0;
    margin:0;
    padding:0;
}
.box { 
    margin:0;
    padding:0;
    float : left;
    width:50%;
}
<!DOCTYPE html>
<html>
    <body>
        <div class="box">
                <iframe src="https://open.spotify.com/embed/user/radomer/playlist/4S4lTBokwOjIvEHkz3klTj" width="100%" height="500" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
        </div>
        <div class="box">
            <iframe src="https://www.sheldonbrown.com/web_sample1.html" width="100%" height="500" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
        </div>    
    </body>
</html
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...