複数行の浮動小数点divを囲むCSS shrink-to-fitコンテナdiv

Question

私はビデオストリーミングサイトのデザインを書き始めました。 http://www.xjerk.com/new.site/ [SFW]

コンテンツ領域は水平方向に流動的であり、コンテンツ領域の白いボックスは左にフローティングされたdivです。つまり、彼らはお互いの隣にうまく座っていて、余裕がなければ新しい行に流れます。

ただし、コンテンツ領域には、右側に空白領域があり、別のホワイトボックスのための十分なスペースがありません。私はこれを取り除きたい。コンテナdiv（#container_inner）全体を縮小してこの領域を削除するか、または失敗して、右端が白いボックスに合うように、白いボックスの上にある青いバーを（#content contractにすることによって）作成します。

左側の領域（#content）をインラインブロックに設定しようとしましたが、内側の内容がdivの幅よりも大きいため（つまり複数の行にオーバーフローするため）、これは機能しません。

これは何らかの方法で実現できますか、固定幅の設計が最善の策ですか？

PS：私はすべてを十分に説明してくれることを願っています。

Answer 1

メディアクエリーを使用して、青色のバーサイズのブレークポイントを設定します。

Answer 2

video_boxを幅の％に設定してみましたか？

これは空白を削除するはずです。余白をパーセントにも変更してください。そうでない場合は、幅が100％+を超えて開始する可能性があります。 exmapleについては

：

.video_box { 
margin:1%; 

width:31% 
min-width:100px; 
height:370px; 

border-radius: 10px; 
-moz-border-radius: 10px; 

border: 1px solid #d0d0d0; 
background-color: #ffffff; 

float: left;