html - iframe 在 Chrome 中转义 css 列

Question

我正在尝试在具有 3 列的网格中设置 Iframe。

---

HTML

<div id="blogPosts">

    <div class="blogPost">
        <iframe width="100%" src="https://www.youtube.com/embed/YqeW9_5kURI" frameborder="0" allowfullscreen=""></iframe>
        <div class="title">Youtube Video</div>
        <div class="time">11th May, 2015</div>
        <div class="info">this is the best youtube video ever!</div>
    </div>

    ...
</div>

CSS

#blogPosts {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 100%;
}
.blogPost {
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;
}

---

它是什么样的:

---

我想要的样子:

---

但问题是，iframe跳出了网格。这是 my JsFiddle向您展示它正在发生。如您所见，第一个“框”工作正常(正如预期的那样)，但右侧接下来的两个框，iframe 逃脱了吗？

Answer 1

添加:

iframe{
    transform: translate3d(0,0,0);
}

在 this 的帮助下解决了我的问题!