ウィンドウサイズに応じてフローティングdivを持つコンテナを塗りつぶし、divの幅を調整して最大を設定します

Question

これはマガジンのページレイアウトで作業しています。それは今5つの異なるカテゴリを持っています - それぞれのカテゴリは、別のdiv浮動小数点の左側のメインサイトに表示されます。それは今、私は、彼らが幅の設定量に達するまで、すべてのスペースを取るために第一及び第二のラインのストレッチ中に三つのカテゴリーがあり、その後与える腰幅に落ちるしたいと思い、この

--------------page width------------- 
-category1--category2--category3- 
-category4--category5- 

のように見えますページサイズ変更の最初の行の複数のカテゴリの部屋： （最小幅の4つのdivがページ幅の内側に収まらない）とすぐに最小幅のフィット感のある4つの要素として、サイズ変更に次に

-----------------page width----------- 
-category1 --category2 --category3 - 
-category4  --category5  - 

（ ）：

------------------------page width---------- 
-category1--category2--category3--category4- 
-category5- 

これはCSSで可能ですか？ （私はそうは思わない）またはいくつかのJavaScript計算で。私はたくさん試しましたが、私のJavaのスキルは本当に悪いです...

ありがとう！ウィーンからの素晴らしいメッセージ

Answer 1

私はあなたがこれを達成するためにjavascriptを必要とは思わない。私はあなたの後ろにあなたのCSS内のメディアクエリがあると思います。

CSSには、特定のキャンバスの幅、デバイスの幅または向きでCSSルールをターゲティングする機能があります。だから、この

<div class="container"> 
    <div class="category-wrapper"></div> 
    <div class="category-wrapper"></div> 
    <div class="category-wrapper"></div> 
    <div class="category-wrapper"></div> 
    <div class="category-wrapper"></div> 
</div> 

のようなマークアップを持っている。そしてその上でこの

.category-wrapper{ 
    float:left; 
    width:100px; 
} 

@media (min-width:500px) and (max-width:950px){ 
    .category-wrapper{ 
     width:200px; 
    } 
} 

@media (min-width:950px) and (max-width:1024px){ 
    .category-wrapper{ 
     width:400px; 
    } 
} 

などCSSとカテゴリラッパーの幅を変更することができます。

はここ http://www.alistapart.com/articles/responsive-web-design/

作業のこの方法の概念にここhttp://www.w3.org/TR/css3-mediaqueries/メディアクエリの仕様偉大なプライマーを参照していないすべてのブラウザがそれらをサポートしているので、laggersを助けるためにスコットJehlの素晴らしいポリフィルhttps://github.com/scottjehl/Respondを使用しています。

これが役に立ちます。