在页面调整大小之前，iframe 不会在 css 列中加载

Question

演示：http://plnkr.co/edit/nbHOSEc9GGXnajPUdA4I?p=preview

我有一个 3 列布局的卡片，其中一个包含谷歌地图 iframe。当页面加载时，iframe 会乱序跳转，并且在调整窗口大小之前似乎没有任何列，然后它会跳回原位。

HTML

  <div class="columns">
  <div class="box">
    Lorem
  </div>
  <div class="box">
    <iframe class="map" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=London%20Road%2C%20Derby%2C%20United%20Kingdom&key=AIzaSyCX5SkCFvE6-pwrAU2Yx58AYlHiXChRe4U"></iframe>
  </div>
  <div class="box">
    Lorem
  </div>

CSS

.columns {
  -webkit-columns: 3;
}
.box {
  height: 200px;
  width: 200px;
}
.map {
  width: 100%;
}

加载时显示

调整大小后

Answer 1

如果我有这个作为 css，它对我来说很好。用这个替换你的代码，有时这会起作用。

-webkit-columns:  3; /* Chrome, Safari, Opera */
-moz-columns: 3; /* Firefox */
columns: 3;