Question

我正致力于杂志的页面布局。它现在有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技能真的很糟糕......

非常感谢！来自维也纳的好迎接

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/responsive-web-design/

并且由于并非所有浏览器都支持它们，因此请使用Scott Jehl的惊人的polyfill https://github.com/scottjehl/Respond来帮助解决这些问题。

希望这有帮助。

根据窗口大小填充带有浮动div的容器调整div的宽度以设置最大值

1 个答案: