レイアウト要件が非常に厳しい e コマース ページのレイアウトに問題があります。製品説明の横に製品画像を表示し、画像の下に製品に関するオプションの追加情報を表示したいと考えています。幅は全体的なページ レイアウトによって制限されますが、高さは可変です。答えは、「純粋な CSS ではこれを行うことはできません」のようです。
これがモックアップです：
マークされた幅は 372+12+178=562 で、境界線に 8px が残ります。画像と説明の領域には 2 ピクセルの境界線があり、合計 8 ピクセルの水平ピクセルになり、562+8=570 になります。
画像の垂直方向のセンタリングはほとんどソートされていますが、デザインを壊しているのは、オプションの「追加情報」パネルです。このサイトは PHP によって生成されます。この PHP には<div>、製品のデータが利用可能な場合、その追加情報用の がオプションで含まれています。デザインの問題を解決するのに役立つ場合は、「追加情報」要素を常に含めて、空の場合は非表示になるようにスタイルを設定してください。
要件：
- 商品画像の縦横比は自由です。薄くて背の高いものもあれば、幅が広く短いものもあれば、四角いものもあります。
- 製品画像は、その領域を水平方向に塗りつぶし、縦横比によって自然にサイズを調整する必要があります。
- 製品画像は、その領域 (青) の垂直方向の中央に配置する必要があります。追加情報が表示されていない場合、画像は説明領域に沿って垂直方向に中央に配置されます。追加情報が表示されている場合、画像は残りのスペースの垂直方向の中央に配置する必要があります。
- 追加情報は任意の量のテキストで、製品画像領域の下部に配置できます。したがって、高さを固定することはできません。
- 商品説明は、任意の量のテキストにすることができます。
- 「画像と追加情報」列は「説明」列のサイズと垂直方向に一致する必要があり、その逆も同様です。
- 説明と追加情報ボックスは、CSS グラデーションの背景と境界線を採用しています。これらすべての div は、実際にはそれに応じてサイズを調整する必要があります。ここで説明されているように、「偽の列」を回避することはできませんhttp://www.alistapart.com/articles/fauxcolumns/。
- 要素の配置に Javascript を使用したくない。はい、私たちは皆 jQuery の達人であり、素晴らしいツールだと確信していますが、このレイアウトには必須ではありません。
これまでの私のデザインでは純粋な CSS を使用し、テーブルは使用せず、table-cell スタイルを使用して画像を中央に配置していますが、異なるサイズの画像を使用すると壊れる min-height に関係する混乱があります。jsfiddle: http://jsfiddle.net/GJVbX/
このフィドルは、たとえば、製品説明のテキスト コンテンツを 3 倍にしたり、「幅: 370px; 高さ: 400px;」を追加したりすることで簡単に破られます。それは良い高さではありません。
うまく機能する私のデザインの例：
ただし、それを破る画像サイズを見つけるのは難しくありません。
背の高い製品画像によって画像 div が垂直に拡張され、説明列が追いつかないことに注意してください。
私は Freenode の #css IRC チャンネルに参加したことがありますが、これは純粋な CSS を使用して可能であると言われました。センタリング 「display: table-cell」を使用する必要があります。しかし、彼らは非常に役に立ちましたが、議論は複雑すぎて IRC を続けることができませんでした。<table>正確なページレイアウトのために単純に壊れているあらゆる種類の恐ろしいレイアウトメカニズムをもたらすことは理解していますが、主に列を同じ高さに保つ必要があるため、より良い解決策は考えられません.
建設的な批判、代替の解決策、または私の窮状の確認だけでも感謝します:)
編集- 上記の jsfiddle の HTML および CSS コンテンツは、stackoverflow の質問に含まれるこのコンテンツを好む人向けです。これはライブ サイトから抽出され、インデントのために少しクリーンアップされ、ダミーの製品画像 (ライブ サイトで使用されているサムネラー スクリプトによって生成されます) とダミーのテキストが含まれています。
HTML:
<div class="productInfo">
<div class="productTopWrapper">
<div class="productImgWrapper"><div class="wraptocenter"><span></span><img src="http://nickfenwick.com/hood.jpg"></div></div><div class="extraInfoWrapper gradientBackground"><div class="extraInfoInner">Extra info goes here.</div>
</div>
<div class="productDescription gradientBackground"><div class="productDescriptionInner">
Product Description goes here.<br/>
Product Description goes here.<br/>
Product Description goes here.<br/>
Product Description goes here.<br/>
Product Description goes here.<br/>
Yet the gradient ends too soon because this div doesn't fill its space vertically!
</div>
</div>
</div>
</div>
CSS:
DIV.productInfo {
max-width: 570px;
font-family: Verdana,Geneva,'DejaVu Sans',sans-serif;
font-size: 12px; /* Just for this fiddle */
}
.productInfo .productTopWrapper {
overflow: hidden;
margin-bottom: 12px;
position: relative;
}
.productInfo .productImgWrapper {
width: 372px;
min-height: 353px;
float: left;
border: 2px solid #cbcbcb;
text-align: center;
}
/* BEGIN css wrap from http://www.brunildo.org/test/img_center.html */
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 372px;
height: 309px;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
*:first-child+html {} * html .wraptocenter span {
display: inline-block;
height: 100%;
}
/* END css wrap */
.productInfo .extraInfoWrapper {
position: absolute;
left: 0;
bottom: 0;
width: 376px;
}
.productInfo .extraInfoInner {
padding: 5px;
border: 2px solid #cbcbcb;
text-align: center;
}
.productInfo .gradientBackground {
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0d1d3', endColorstr='#fefefe'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#d0d1d3), to(#fefefe)); /* for webkit browsers */
background: -moz-linear-gradient(top, #d0d1d3, #fefefe); /* for firefox 3.6+ */
background: -ms-repeating-linear-gradient(top, #d0d1d3, #fefefe);
background: repeating-linear-gradient(top, #d0d1d3, #fefefe);
}.productInfo .productDescription {
width: 178px;
min-height: 353px;
margin-left: 388px;
border: 2px solid #cbcbcb;
}
.productInfo .productDescriptionInner {
padding: 5px;
font-size: 1.2em;
line-height: 1.2em;
}