无法在 iframe 中使用列数 CSS 属性

Question

摘要

我正在使用 column-count CSS 属性来实现类似 pinterest 的布局设计。但是因为 column-count 如果我放置 Youtube 嵌入 <iframe>，这个 iframe 就会消失。你能告诉我它为什么消失了吗？

详情

我遵循 this example for my grid layout. It's working good. But when I put and Youtube video iframe instead if <img>, it's disappearing when it's start playing. Here 是我代码中的示例（我没有放所有样式，以免您混淆）。如您所见，它在视频开始播放时消失了。但是当我从 css 中删除 *-column-count 行时，它正在工作。但这次我失去了 Pinterest 风格 .

Answer 1

http://jsfiddle.net/xny8yys2/1/

好的，这太乱了。尝试使您的代码干净，因为它使调试方式更容易。这里的问题有两个方面。

.blog-list-template-pin img 如果您想在列中使用 iframe，这应该包括 iframe 元素
此外，您向 div 父列之一添加了内联 css 背景图像。
最后，我建议使用 display css 以 pinterest 风格构建列。结果相同，向后兼容性更高。

.blog-list-template-columns {
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  -moz-column-fill: auto;
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  column-count: 3;
  column-gap: 15px;
  column-fill: auto;
}
.blog-list-template-pin {
  display: inline-block;
  /*box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);*/
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  border: 1px solid #d7d7d7;
  margin-bottom: 5px;
}
.blog-list-template-pin img,
.blog-list-template-pin iframe {
  width: 100%;
}
.blog-list-template-pin .blog-list-template-pin-detail {
  padding: 30px;
}
.blog-list-template-pin .heading {
  margin-bottom: 0;
  font-weight: 700;
}
.blog-list-template-pin .post-date {
  color: #f03236;
  font-size: 12px;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
}
.blog-list-template-pin .post-excerpt {
  font-family: "Lato", sans-serif;
  color: #515151;
  margin-top: 20px;
}
.blog-list-template-pin .author {
  font-family: "Raleway", sans-serif;
  color: #b8b8b8;
  font-weight: 500;
  letter-spacing: 1px;
  font-size: 13px;
  display: block;
}
.blog-list-template-pin .read-more {
  margin-top: 30px
}
.blog-list-template-pin .read-more:hover {
  color: #f03236;
  text-decoration: none;
}

<div class="container" style="margin-top: 35px">
  <div class="row blog-list-template-columns">
    <div class="blog-list-template-pin">
      <img src="img/pin2.jpg" alt="" class="img-responsive">
      <div class="blog-list-template-pin-detail">
        class="heading">TITLE</h5>
        <span class="post-date">29 DECEMBER 2014</span>
        <span class="author" style="margin-top: 20px">POSTED BY AUTHOR</span>
        <a href="" class="button-full-white read-more">READ MORE</a>
      </div>
    </div>
    <div class="blog-list-template-pin full-bg-pin">
      <iframe width="367" height="206" src="https://www.youtube.com/embed/YJVmu6yttiw?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0"></iframe>
      <div class="blog-list-template-pin-detail">
        <h5 class="heading">TITLE</h5>
        <span class="post-date">29 DECEMBER 2014</span>
        <span class="author" style="margin-top: 20px">POSTED BY AUTHOR</span>
        <a href="" class="button-full-white read-more">READ MORE</a>

      </div>
    </div>
    <div class="blog-list-template-pin">
      <iframe width="367" height="206" src="https://www.youtube.com/embed/YJVmu6yttiw?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0"></iframe>
      <div class="blog-list-template-pin-detail">
        <h5 class="heading">TITLE</h5>
        <span class="post-date">29 DECEMBER 2014</span>
        <span class="author" style="margin-top: 20px">POSTED BY AUTHOR</span>
        <a href="" class="button-full-white read-more">READ MORE</a>

      </div>
    </div>
  </div>
</div>

Answer 2

这是 Chrome 和 CSS 列的错误。仅当视频显示在第一列时才有效。

CSS 列实施尚未真正做好生产准备。

将 transform: translate3d(0,0,0); 添加到 iframe CSS 为我解决了这个问题。

知道了here。

无法在 iframe 中使用列数 CSS 属性

Can't use column-count CSS property with iframe

html

css

iframe

column-count