可缩放的 div 网格以适应浏览器大小答案

【问题标题】：Scalable grid of divs to fit browser size可缩放的 div 网格以适应浏览器大小
【发布时间】：2013-01-25 21:30:51
【问题描述】：

我正在努力创建一个可缩放的 div/图像网格，以适应浏览器的大小，如下所示：http://svla.co/
我不知道是否可以使用 CSS 并且可能需要 jQuery，我完全不确定。这是我的代码：

<div id="journal-overview">
    <a href="#"><div class="journal-thumbs" style="background-color: #f3f3f4; width: 315px; height: 196px"></div></a>
    <a href="#"><div class="journal-thumbs" style="background-color: #f3f3f4; width: 315px; height: 196px"></div></a>
    <a href="#"><div class="journal-thumbs" style="background-color: #f3f3f4; width: 315px; height: 196px"></div></a>
    <a href="#"><div class="journal-thumbs" style="background-color: #f3f3f4; width: 315px; height: 196px"></div></a>
    <a href="#"><div class="journal-thumbs" style="background-color: #f3f3f4; width: 315px; height: 196px"></div></a>
    <a href="#"><div class="journal-thumbs" style="background-color: #f3f3f4; width: 315px; height: 196px"></div></a>
    <a href="#"><div class="journal-thumbs" style="background-color: #f3f3f4; width: 315px; height: 196px"></div></a>
    <a href="#"><div class="journal-thumbs" style="background-color: #f3f3f4; width: 315px; height: 196px"></div></a>
    <a href="#"><div class="journal-thumbs" style="background-color: #f3f3f4; width: 315px; height: 196px"></div></a>
    <a href="#"><div class="journal-thumbs" style="background-color: #f3f3f4; width: 315px; height: 196px"></div></a>
    <a href="#"><div class="journal-thumbs" style="background-color: #f3f3f4; width: 315px; height: 196px"></div></a>
    <a href="#"><div class="journal-thumbs" style="background-color: #f3f3f4; width: 315px; height: 196px"></div></a>
    <a href="#"><div class="journal-thumbs" style="background-color: #f3f3f4; width: 315px; height: 196px"></div></a>
</div>

还有一个 jsfiddle：http://jsfiddle.net/KgpTT/
任何帮助将不胜感激！

【问题讨论】：

您可以使用百分比值和媒体查询。
当你可以单独使用 javascript 时，为什么还需要一个 jQuery 库？

标签： jquery css scalability

【解决方案1】：

看看新的 CSS flexbox 功能，如果您的目标浏览器支持它。它将处理这个早餐用例，不仅包括重新布局，还包括动态调整各个元素的大小。见http://www.w3.org/TR/css3-flexbox/。它本质上支持响应式设计。您的问题可能会通过在容器上放置 display: flex; CSS 属性这样简单的方法来解决。即使你不能在这个项目中使用它，也值得一看。

【讨论】：

这看起来不错，谢谢。我认为我的问题可能很容易解决，尽管我不确定如何解决。假设我想要一个跨所有浏览器的 4 列网格，因此每个 div 大约是宽度的 25%。难道不能按照我原来的 315x196 大小按比例缩放高度和宽度吗？
只需添加 CSS 规则 .journal-thumbs { flex: 0 0 25%; }。 0 0 表示它们既不会从 25% 的起始宽度增长也不会缩小。请注意，到目前为止，您必须添加前缀 display: -webkit-flex;（用于容器）和 -webkit-flex: 0 0 25%;（用于项目）。