1

まとめ

CSS プロパティを使用してcolumn-count、ピンタレストのようなレイアウト デザインを実現しています。しかしcolumn-count、Youtube Embed を入れると<iframe>、この iframe が消えてしまいます。消えた理由を教えてください。

詳細

グリッド レイアウトについては、この例に従います。それはうまくいっています。しかし、代わりに Youtube video iframe if を入れると、<img>再生が始まると消えてしまいます。これが私のコードの例です（混乱しないように、すべてのスタイルを入れたわけではありません）。ご覧のとおり、ビデオの再生が開始されると消えます。しかし、*-column-countCSS から行を削除すると、機能します。しかし、今回はPinterest スタイルを失っています。

4

2 に答える 2

4

これは、Chrome および CSS 列のバグです。ビデオが最初の列に表示される場合にのみ機能します。

CSS 列の実装は、実稼働の準備が整っていません。

iframe CSS に追加するtransform: translate3d(0,0,0);と、この問題が解決しました。

ここでそれについて知りました。

于 2015-05-25T12:58:27.973 に答える
1

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

わかりました、これはかなり厄介でした。デバッグが簡単になるため、コードをきれいにしてみてください。ここでの問題は 2 つあります。

  • .blog-list-template-pin img列で iframe を使用する場合は、これに iframe 要素を含める必要があります。

  • さらに、列の親 div の 1 つにインライン css background-image を追加しました。

  • 最後に、ピンタレスト スタイルの列構造化に表示 CSS を使用することをお勧めします。同じ結果で、下位互換性が向上します。

.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 に答える