Question

概要

我使用column-count CSS属性来实现像pinterest这样的布局设计。但由于column-count我放了一个Youtube嵌入<iframe>，这个iframe正在消失。你能告诉我为什么它会消失吗？

详情

我按照this example进行网格布局。它运作良好。但是当我把{Youtube视频iframe改为<img>时，它会在它开始播放时消失。 Here是我的代码中的一个示例（我没有把所有样式都放在一起，所以你赢了，不要混淆）。正如你所看到的，当视频开始播放时它就消失了。但是当我从css中删除*-column-count行时，它正在工作。但这次我失去了 Pinterest风格。

Answer 1

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

好的，这太乱了。尝试使代码清洁，因为它使调试更容易。这里的问题是双重的。

.blog-list-template-pin img如果您想在列中使用iframe，则应包含iframe元素
此外，您还将内联css背景图像添加到父div之一。
最后，我建议使用display css以pinterest样式进行列结构化。相同的结果，更多的向后兼容性。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

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

CSS列实现尚未准备好进行生产。

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

了解它here。

无法对iframe使用列计数CSS属性

2 个答案: