- ベストアンサー
テキスト部分の高さを合わせたいのですが、、、
テキスト部分の高さを合わせたいのですが、、、 まず添付の画像のようなかんじに作っています。 テキストのエリアの高さをそれぞれ揃えたいのです。 それぞれ文字量がバラバラです。 そしてテキストの文字を大きくしたり小さくしたりできないといけないので、 高さの指定を○○pxと指定できないのです。 それぞれの画像の高さ、テキストの高さはそろえておく事が前提です。 テーブルは使わないとの指示です。 どのようにすれば高さを指定しつつも、文字を大きくした場合に文字があふれる事なく表示できるのでしょうか？ 宜しくお願いいたします。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
「要望が矛盾している」が結論です。 もう一度、要望を整理しましょう。 ・テーブルを使用しない ・横一列に並んだ同一内容のデータの高さをそろえたい。 のふたつは矛盾しているのです。 「テーブルを使用しない」というのは、表示をリキッドスタイルにして、商品説明をウィンドウ幅が狭いときはひとつ、ウィンドウが広いときは４つとか５つとかを並べたいという場合に使用します。典型的な例は、DMM.com ( http://www.dmm.com/rental/ppr/-/list/=/sort=date/ )などがあります。 示されたデータ自体は、テーブル・・表でマークアップしてもHTML的には問題のない内容ですが、その場合は、このウィンドウ幅に合わせて並べる商品リストの数が固定さてしまいます。また、各行でデータ量が異なる場合は、セルの高さが行によって異なります。 この場合は、次のように条件を変えることで、リキッドデザイン--テーブルを使わず---各商品データを統一したサイズで表示することが可能になります。 1) ウィンドウ幅に合わせて一行に並べる商品説明の数を変える。 2) 各説明のデザインは統一する。その場合説明文章の最大文字数は制限する。 3) はみ出るデータはマウスを合わせたときに追加表示する。 <ul id="ProductList"> <li class="title"><a href="../product/ABC">ABC</a> <ol> <li class="explanation">この商品は・・・・<span>追加説明</span></li> <li class"Photo"><a href="../product/ABC"><img src="./photo/abc.jpg"></a></li> </ol> </li> <li class="title"><a href="../product/DEF">DEF</a> <ol> <li class="explanation">この商品は・・・・</li> <li class"Photo"><a href="../product/DEF"><img src="./photo/def.jpg"></a></li> </ol> </li> ・・・・・ </ul> そのうえで、 ul#ProductList, ul#ProductList li, ul#ProductList ol, ul#ProductList ol li{ display:block; } ul#ProductList li{ float:left; } ul#ProductList li ol li{ float:none; } ul#ProductList li ol li{ height: 8ex; } ul#ProductList li ol li span{ display:none; } ul#ProductList li ol li:hover span{ display:block; } などとスタイルシートを書けばよいです。
その他の回答 (3)
- metametamu
- ベストアンサー率51% (153/295)
IEではdisplay:inline;のバグを利用することで擬似的にcssでdisplay:table-cell;を表現できます。 モダンブラウザであればdisplay:table-cell;に対応しているのでそれでレイアウトしておき、画像のみposition:absolute;で下に設置します。 画像の高さを300pxとすると・・・ <style type="text/css"> #CONTENT { width:600px; position:relative; margin:0; padding:0; margin-bottom:300px; /* テーブルの下の余白です (画像の高さ＋テーブルからの距離＋必要なら画像下の余白) */ white-space:nowrap; font-family:monospace; /* 必要なければ消してください */ } #CONTENT li { display:inline; width:200px; vertical-align:top; white-space:normal; zoom:1; } #CONTENT>/**/li { display:table-cell; } #CONTENT li h3, #CONTENT li p { margin:0; } #CONTENT li img { position:absolute; bottom:-300px; /* テーブルの下に画像を配置します (”画像の高さ＋テーブルからの距離”をマイナス指定) */ } </style> </head> <body> <ul id="CONTENT"> <li> <h3>タイトル１</h3> <p>テキストテキストテキストテキストテキストbテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p><img src="A.jpg" alt="" /></p> </li> <li> <h3>タイトル２</h3> <p>テキスト</p> <p><img src="B.jpg" alt="" /></p> </li> <li> <h3>タイトル３</h3> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p><img src="C.jpg" alt="" /></p> </li> </ul> 今手元に環境がないので細かい確認が取れませんが、たしかこれでIE6以上とモダンブラウザであれば同じ表示になっていると思います。
お礼
ご丁寧にありがとうございました！！！ 上記の方の回答と合わせて参考になりました！！！
- think49
- ベストアンサー率59% (285/482)
対応ブラウザは、どの範囲なのでしょうか？ IE8以降で良ければ、display: table-cell; が使えます。 IE7以下を対象とするなら、JavaScriptと併用するしか選択肢がないと思います。 掲示板/雑談ルーム/ボックスの高さ - TAG index Webサイト http://www.tagindex.com/cgi-lib/bbs/patio.cgi?mode=view&no=322
お礼
ありがとうございました！！！
- yambejp
- ベストアンサー率51% (3827/7415)
一定の高さと幅でくまれた構造をテーブルといいます。 テーブルで組んでください。
お礼
はいはい。
お礼
ご丁寧にありがとうございました！！！ 非常に助かりました！！！