根据窗口大小用浮动 div 填充容器并调整 div 的宽度以设置最大值答案

【问题标题】：fill container with floating divs according to window size & adjust width of divs to set max根据窗口大小用浮动 div 填充容器并调整 div 的宽度以设置最大值
【发布时间】：2011-07-25 01:37:31
【问题描述】：

我正在为杂志设计页面布局。它现在有 5 个不同的类别 - 每个类别都显示在主站点上的一个单独的 div 左侧浮动。所以它看起来像这样

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

现在我想让第一行和第二行中的三个类别拉伸以占用所有空间，直到它们达到一定的宽度，然后回退到较低的宽度，以便在第一行的第一行提供更多类别空间页面大小调整：（最小宽度的 4 个 div 不适合页面宽度）

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

然后调整大小（只要 4 个具有最小宽度的元素适合）：

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

这可以用 css 实现吗？（我不这么认为）或一些javascript计算。我尝试了很多，但我的java技能真的很糟糕......

非常感谢！来自维也纳的问候

【问题讨论】：

标签： javascript css resize autoresize

【解决方案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/responsive-web-design/ 是有关这种工作方式概念的重要入门书

由于并非所有浏览器都支持它们，因此请使用 Scott Jehl 的惊人 polyfill https://github.com/scottjehl/Respond 来帮助落后者。

希望这会有所帮助。

【讨论】：

太棒了！非常感谢！这正是我所需要的！