在页面调整大小之前，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;