どのようにしてこのターゲットをCSSで達成できますか？

Question

youtubeのメインページに入り、その幅を縮小しようとすると、動画の量も減少します。

ですから、例えばあなたは、この画面（width: 500px;）がある場合、：あなたは、画面tiがwidth: 300px;と一緒に縮小する場合は、ちょうど2つの動画がscreanに表示されます次に

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

、他の2つの動画をう値hiddenのプロパティvisibilityを取得します（これは何が起こったかと思います...）。

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

この目標を達成するにはどうすればよいでしょうか？ 私は別のid（...エトセトラ「ビデオ1」など）、および@media screen...を使用してのabbilityに任意のビデオを与えることについて考えた - ちょうど各ビデオの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}