0

次のようなブラウザのサイズに合わせて調整される div/画像のスケーラブルなグリッドを作成するのに苦労しています: http://svla.co/
CSS を使用して可能かどうかわかりません。よくわかりません。これが私のコードです：

<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 フレックスボックス機能を確認してください。再レイアウトだけでなく、個々の要素の動的なサイズ変更も含めて、朝食のこのユースケースを処理します。http://www.w3.org/TR/css3-flexbox/を参照してください。レスポンシブ デザインを本質的にサポートします。display: flex;あなたの問題は、コンテナに CSS プロパティを配置するのと同じくらい簡単なことで解決されるかもしれません。このプロジェクトに使用できなくても、一見の価値があります。

于 2013-01-25T13:30:51.283 に答える