CSSレイアウトのベストプラクティス

Question

私はCSSルールとHTML elemtentsの最適な組み合わせは、このレイアウトを実現するためには何かわからない午前：（謝罪はイメージのために、それは私が考えることができる最高の方法だった

example layout

）私が念頭に置いていたものを表現するために

それは本質的に2行4列の表ですが、私はテーブルを使用する必要はありません。

私はこれを行うだろうが、それはエレガントまたは最適ではないだろうと私はそれを行うためのクリーンな方法を知りたい、一緒に何かをハック可能性がかなり確信しています。

が、これは明らかではない場合、私に教えてください。

が

<section class="clearfix"> 
    <figure> 
     <img src="img1.jpg"> 
     <figcaption>Text here</figcaption> 
    </figure> 
    <figure> 
     <img src="img2.jpg"> 
     <figcaption>Text here</figcaption> 
    </figure> 
    <figure> 
     <img src="img3.jpg"> 
     <figcaption>Text here</figcaption> 
    </figure> 
    <figure> 
     <img src="img4.jpg"> 
     <figcaption>Text here</figcaption> 
    </figure> 
</section> 

あなたのCSSは次のようになります。：おかげ

シンプルなレイアウトのために

Answer 1

これはどういう意味ですか？ http://jsfiddle.net/semencov/P8B4R/

Answer 2

は、左のすべてのコンテナ（ "列"）を浮遊しclearfixにこれらの列の親コンテナを確認してください

(clearfix as described on linked page) 

figure { 
    float: left; 
} 

詳細な制御と構造については、960.gsのようなグリッドシステムを試してみてください。

この例では、あなたのイメージは、キャプションを持っていると仮定され、そしてHTML5 figure tag and figcaption tagsは、この目的のために非常に適しています。

Answer 3

ターゲットaudicenceだ内容に応じて、1200px.comを使用することを検討してください。

は、すでにあなたのテンプレートを持っている場合、私はあなたにこのjsFiddleを作りました。あなたはそこから起動することができます:)

http://jsfiddle.net/aLXby/6/

Answer 4

最も重要なことは、セマンティックあなたのHTMLを維持することです。したがって、このレイアウトに最も適したHTMLではなく、そのコンテンツに最も適したHTMLがあります。この場合、マットの示唆（figureとfigcaption）です。私はおそらくセクションよりむしろリスト（ulとli）を使用するでしょう。

スタイリングに関しては、そのレイアウトを達成するためのさまざまな方法があります。あなたの特定のニーズに応じて（画像の高さは等しいか、幅は等しいか、キャプションはどうすればよいですか？1行か複数行など）浮動小数点を使用すると、display: inline-blockを使用することができます。 display: table/table-row/table-cellを使用できます。

編集：私はこのためのグリッドシステムを使用すると、アニメーションGIFを表示するには、MVCフレームワークを使用してのようなものであると主張していると思います。私が見たすべてのグリッドシステムでは、ユーザーにかなりの負荷をdivとマークアップを破壊するクラスを追加する必要があります。