0

我使用“column-count 3”将视频（in）放入 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）。而已。列数+绝对位置的非常奇怪的行为。

于 2015-12-01T21:51:20.190 回答