根據窗口大小用浮動div填充容器並調整div的寬度以設置最大值

Question

我正在為雜志制作頁面布局。 現在，它具有5個不同的類別-每個類別都顯示在主網站上的一個單獨的div中，向左浮動。 所以看起來像這樣

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

現在我想讓第一行和第二行中的三個類別拉伸以占據所有空間，直到它們達到設定的寬度，然后回落到較低的寬度以在頁面大小調整的第一行中為更多類別提供空間： （最小寬度的4格不適合頁面寬度）

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

然后調整大小（只要最小寬度的4個元素適合）：

------------------------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>

然后像這樣用CSS更改類別包裝的寬度

.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;
    }
}

等等。

有關媒體查詢的規范，請參見http://www.w3.org/TR/css3-mediaqueries/有關此工作方式概念的入門知識， 網址為http://www.alistapart.com/articles/sensitive-web -設計/

並且由於並非所有瀏覽器都支持它們，請使用Scott Jehl的驚人的polyfill https://github.com/scottjehl/Respond來幫助解決這些問題。

希望這可以幫助。