0

我正在努力创建一个可扩展的 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/
任何帮助将不胜感激！

4

1 回答 1

1

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

于 2013-01-25T13:30:51.283 回答