Question

如果您要进入youtube的主页并尝试缩小它的宽度，那么视频数量也会缩小。

例如，如果您有此屏幕（width: 500px;）：

 _____      _____     _____     _____
|     |    |     |   |     |   |     |
|_____|    |_____|   |_____|   |_____|

然后，如果您使用width: 300px;缩小屏幕，则只需在screan上显示两个视频，其他两个视频将获得值visibility的属性hidden（我假设这发生了什么......）。

 _____      _____  
|     |    |     |  
|_____|    |_____|

我怎样才能完全实现这个目标？我想给任何视频另一个id（比如“video-1”等等），并且使用@media screen...的可能性 - 每次只更改每个视频的visibility属性。

在我开始行动之前，我想知道最佳和更短的方法。你知道......要学习新思想，这是一件好事：）

Answer 1

您不需要将'bleeded div'（从屏幕上掉下来的那些）设置为隐藏的可见性。

您可以使用div作为掩码来实现此目的，其中较小的div驻留。

将此蒙版设置为与其中较小的div相同的高度。将CSS属性overflow-y设置为hidden。所有较小的div内部都需要浮动float:left。

通过这种方式，您可以获得所需的效果。

示例：

HTML

<div class="mask">
  <div class="inner">
    ...
  </div>
  <div class="inner">
    ...
  </div>
  <div class="inner">
    ...
  </div>
  <div class="inner">
    ...
  </div>
  <div class="inner">
    ...
  </div>
</div>

CSS：

.mask {height:200px;width:auto;overflow-y:hidden}
.mask .inner {float:left;height:200px;width:200px;margin-right:10px}

我怎样才能用css实现这个目标？

1 个答案: