0

"column-count 3" を使用して、動画 ( 内) を 3 列のレイアウトに配置しました。そして、上から 2 番目または 3 番目のビデオの再生ボタンを押すたびに、前の列の一番下にジャンプしてしまいました。Chrome でのみ発生します。Firefoxでは、期待どおりに完璧です。

StackOverflow で見つけた同様の質問に関するすべてのヒントを適用しようとしましたが、どれもうまくいきません (ラッピング コンテナーへの translate プロパティの追加を含む)。それを手伝ってくれませんか？

これが私のコードです（ジェイド）：

            .column-list.column-list--three
            each video in content['pausecast']
                    +video-panel(video)

mixin video-panel(obj)
.video-panel
    .aspect-ratio
       iframe(scrolling="no" frameborder="0" src="//www.youtube.com/embed/"+ obj.youtubeId.replace('watch?v=',''))

.aspect-ratio
    position relative
    width 100%
    height 0
    padding-bottom 51%
    // transform translate3d(0,0,0)


.aspect-ratio iframe
    position absolute
    width 100%
    height 100%
    left 0
    top 0

.video-panel
    border-bottom grey 2px solid
    margin-bottom 40px

サイズを変更して正しいアスペクト比を維持しながら柔軟にする必要があるため、固定の高さや幅に行くことは絶対にできません。そのため、適用される変更は可能な限り最小限に抑える必要があります。前もって感謝します！

4

1 に答える 1

0

私にとってうまくいった解決策は、列数を取り除き、代わりに他のグリッドを使用することでした。Jeet と col(4/12、サイクル: 3) を使用。それでおしまい。column-count + position absolute の非常に奇妙な動作。

于 2015-12-01T21:51:20.190 に答える