1

概括

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

细节

我按照此示例进行网格布局。它运作良好。但是当我把 Youtube video iframe 改为 if<img>时，它在开始播放时就消失了。这是我的代码中的一个示例（我没有放置所有样式，因此您不会混淆）。如您所见，它在视频开始播放时消失了。但是当我*-column-count从 css 中删除行时，它正在工作。但这一次我正在失去Pinterest 风格。

4

2 回答 2

4

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

CSS 列的实现还没有真正为生产做好准备。

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

在这里找到了。

于 2015-05-25T12:58:27.973 回答
1

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

好的，这很混乱。尝试使您的代码干净，因为它使调试方式更容易。这里的问题是双重的。

  • .blog-list-template-pin img如果您想在列中使用 iframe，这应该包括 iframe 元素

  • 此外，您将内联 css 背景图像添加到列父 div 之一。

  • 最后，我建议使用 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>

于 2015-02-06T17:11:29.930 回答