Question

我正在使用两个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

Answer 1

使用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

Answer 2

使其浮动将解决此问题。请参阅 .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

iFrame不并排响应（屏幕变小时，内联块中断）

2 个答案: