HTML + CSSで以下のレイアウトを達成するには？

Question

私が達成したいもののASCIIアートのイラストから始めましょう：

Category title 

    Title  Title 
+-------+ +-------+ 
|  | |  | 
|  | |  | 
| Image | | Image | 
|  | |  | 
|  | |  | 
+-------+ +-------+ 
Subtitle Subtitle 

    Category title 

    Title  Title 
+-------+ +-------+ 
|  | |  | 
|  | |  | 
| Image | | Image | 
|  | |  | 
|  | |  | 
+-------+ +-------+ 
Subtitle Subtitle 

だから私はアイテムが含まれ、これらのカテゴリを持っています。各項目は、タイトル、字幕、画像から構成されます。画像のサイズは異なります。幅は150pxで一定ですが、高さの範囲は150pxから252pxです。そして、私はこのサイズのどこかにあるはずですが、将来どのサイズがあるかを予測することはできません。幅は150pxで一定で、高さは150pxから300pxの間で変わることができます。

もちろん、各カテゴリのカウントカテゴリとアイテムは任意です。各カテゴリには少なくとも1つのアイテムがあります（それ以外の場合はカテゴリを表示しません）。タイトルと字幕の長さも可変ですが、ほとんどはかなり短いです。

私が作成する効果は以下の通りです：

• アイテムのタイトルとサブタイトルは、重大な空白挟んずに右隣の画像（上、下）にレンダリングされます。
• カテゴリ内のアイテムが多すぎる場合、ラップを開始してさらに行を作成します。水平スクロールはありません。行は明らかに互いに下にある必要があります。ウィンドウの幅が変わると、アイテムは自動的に並べ替えられます。
• アイテムのタイトルまたはサブタイトルがもう少し長い場合、それらはラップする必要があります。画像の幅を大幅に超えて拡大すべきではありません。
• カテゴリヘッダーには、その上と下のアイテム行との間に空白スペースが必要です。
• カテゴリのタイトルはページの中央に表示されます。アイテムのタイトルとサブタイトルは、画像の中央に表示されます。

効果がTABLE、DIVまたはThe Forceによって達成されるかどうかは関係ありません。私はちょうどそのように見えるようにしたい。 :)これは可能ですか？はいの場合、これを行う方法は？

もしそうでなければ、同じ情報をカプセル化して別のブラウザサイズで見栄えの良い代替レイアウトを提案することはできますか？

Answer 1

更新：このコードは動作し、Opera 9.51、FF 3.0、およびIE7でテストされています。

これを行うにはどうすればよいですか？ ;）

これを達成する方法はたくさんあります。 1つのことは確実です。あなたは別の高さを持つことはできません。イメージの高さが異なる場合、divは適切に配置されません。ここではHTMLコードは次のとおりです。

<div id="outerContainer"> 
    <div class="container"> 
    <div class="categoryTitle">Category title here</div>  
    <div class="itemTitle">Square image </div> 
    <div class="myImage"> <img class="myImage" src="http://upload.wikimedia.org/wikipedia/commons/thumb/archive/8/85/20060705145122!Smiley.svg/120px-Smiley.svg.png" /> </div> 
    <div class="subTitle">Subtitle here </div> 
    </div> 

    <div class="container"> 
    <div class="categoryTitle">Category title here</div>  
    <div class="itemTitle">High Image</div> 
    <div class="myImage"> <img class="myImage" src="http://www.norwegianfashion.no/wp-content/uploads/fashion_shows/2009/Moods%20-%20feb/_SPS7281.jpg" /> </div> 
    <div class="subTitle">Subtitle here </div> 
    </div> 

    <div class="container"> 
    <div class="categoryTitle">Category title here</div>  
    <div class="itemTitle">High Image </div> 
    <div class="myImage"> <img class="myImage" src="http://www.norwegianfashion.no/wp-content/uploads/Fashion_week/spring_09/regine_mowill/_SPS7094.jpg" /> </div> 
    <div class="subTitle">Subtitle here </div> 
    </div> 

    <div class="container"> 
    <div class="categoryTitle">Category title here</div>  
    <div class="itemTitle">Wide Image </div> 
    <div class="myImage"> <img class="myImage" src="http://www.norwegianfashion.no/wp-content/uploads/Fashion_week/spring_09/pling/_SPS7181_copy.jpg" /> </div> 
    <div class="subTitle">Subtitle here </div> 
    </div> 
</div> 

CSS：

#outerContainer { 
    width: 350px; 
    border: solid 1px #777; 
    overflow: auto; 
    text-align: center; 
} 

.categoryTitle { 
    font-weight: bold; 
} 
.container { 
    float: left; 
    border: solid 1px #ccc; 
    height: 270px; 
    width: 150px; 
    margin: 10px 5px 10px 5px; 
} 

#outerContainer .myImage { 
    max-height: 200px; 
    max-width: 150px; 
    height: expression(this.height > 200 ? 200 : true); 
    width: expression(this.width > 150 ? 150 : true);  
} 

.imgContainer { 
    overflow: hide; 
} 

Answer 2

は、スティーブンは私を打つが、私はもう少し;-)を充電します。ここでは、要件に合った簡単なソリューションのマークアップを示します（CSSは別ファイルにする必要があります）。未解決の問題：

• クロスブラウザ？厳密なモードにブラウザを強制して、1つのボックスモデル（特にIE6では重要）を扱わなければならないようにしてください。
• Stevenが指摘しているように、画像の高さを固定する必要があります。長いタイトルをラップします。私が提供したマークアップとCSSは、この井戸を扱っていませんが、これを正しく機能させるには、タイトルの最大高さを決めたり、アイテムを自動的に折り返して（テーブルを使用できるように）要件を落とさなければならないということです。代わりに固定されたコンテナの高さで、画像の下にすべてを置くことを提案します。

マークアップとCSS：

<style type="text/css"> 

    h3.category { clear: both; } 
    div.item { float: left; width: 83px; margin-right: 20px; } 
    div.item img { width: 83px; height: 125px; } 
    div.item h4 { margin-bottom: 3px; } 
    div.item h5 { margin-top: 3px; } 

</style> 

<h3 class="category">Category <strong>title</strong></h3> 

<div class="item"> 
    <h4>Title</h4> 
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" /> 
    <h5>Subtitle</h5> 
</div> 

<div class="item"> 
    <h4>Longer Title</h4> 
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" /> 
    <h5>Longer Subtitle</h5> 
</div> 

<div class="item"> 
    <h4>Very Long, Wrapping Title</h4> 
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" /> 
    <h5>Very Long, Wrapping Subtitle</h5> 
</div> 

<div class="item"> 
    <h4>Title</h4> 
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" /> 
    <h5>Subtitle</h5> 
</div> 

<h3 class="category">Category <strong>title</strong></h3> 

<div class="item"> 
    <h4>Very Long, Wrapping Title</h4> 
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" /> 
    <h5>Very Long, Wrapping Subtitle</h5> 
</div> 

<div class="item"> 
    <h4>Longer Title</h4> 
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" /> 
    <h5>Longer Subtitle</h5> 
</div> 

<div class="item"> 
    <h4>Title</h4> 
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" /> 
    <h5>Subtitle</h5> 
</div> 

Answer 3

小道具スパンコメントをrpfloします。これはie7/8、ff3、chrome/safariで動作します。

<div class="cat"> 
    <h2>Category 1</h2> 
    <span class="img"> 
    <h3>Title 1 with a long title wider than 150px</h3> 
    <img src="yourimage.png" /> 
    <h4>Subtitle 1</h4> 
    </span> 
</div> 

とCSS：

div.cat { 
    overflow:auto; 
    margin-bottom:15px; 
} 
div.cat span.img { 
    display:inline-block; 
    vertical-align:top; 
    width:150px; 
    margin-right:15px; 
    text-align:center; 
} 
div.cat span.img h3, div.cat span.img h4 { 
    margin:0; 
} 

Answer 4

私は、レイアウトのこの種のための最も簡単な方法は、CSSのフレームワークを使用することだと思います。単純なグリッドレイアウトの最適な選択はhttp://960.gs/

です。使いやすく、ブラウザの互換性に問題はありません。