根据窗口大小用浮动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来帮助解决这些问题。

希望这可以帮助。