Question

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

Answer 1

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

Answer 2

您需要使用responsive webdesign的概念我建议使用一个CSS框架，这将使这更容易（如twitter bootstrap）

可扩展的div网格，以适应浏览器大小

2 个答案: