人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSの質問です。
div.a / div.b / div.c という3つの要素があります。
これは親要素の中に入っており、この親要素のwidthは固定です(仮に500pxとします)。

上記3子要素をすべてfloat:leftにして、横に3つ並ぶレイアウトにしたとき、3要素全て、幅可変にしたいと考えています。
その際、div.a / div.bに関しては、要素内に入っている内容に合わせてwidthを追随させたいと考えています。

つまり、
・div.a と div.b は中に表示するテキストや画像に合わせて横幅が決定される
・div.c は、[ 500px - (div.aの幅 + div.bの幅) ] にしたい。

現状、3要素ともwidthの指定をしないでおけば、「div.cに表示するテキストが短ければ」意図通りの表示がされますが、div.cに想定幅を超える長い文章が入った際には、落っこちてdiv.a、div.bの下に表示されてしまいます。

・widthを固定長で指定できない
・割合が決まっているわけではないのでwidthを%でも指定できない
という状況で、上記のようなレイアウトを実現する方法はないでしょうか?

1218969843
●拡大する

●質問者: nacbox
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS テキスト レイアウト 意図 画像
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● pntswrks
●35ポイント

これは必ずフルCSSでないといけないのでしょうか?


CSSオンリーの考え方では上記実現は厳しいと思います。


可能性として、以下の3つの方法が考えられます。


・大枠だけtableで組む

3つのtdだけテーブルで組み、その中はフルCSSで組む方法が一番無難だと思います。


・javascriptで幅を動的に計算し、CSSに算入する

2つのdivの幅をjavascriptで計算し、その値を元に[ 500px - (div.aの幅 + div.bの幅) ] の式にあてこめば実現可能かと思います。


・CSSのdisplay:table-cellというプロパティを使う

これはdivによるフルCSSレイアウトですが、あたかもtableレイアウトのように実装するプロパティで、

実際htmlもとてもシンプルになります。

しかし、(Fuck)IEに対応していないので、実務では使えないと思います。(IE8から対応)


実際、私は実案件では一番上の方法をクライアントにも了承を得た上で使っています。

◎質問者からの返答

フルCSSでなければいけないわけではありませんが、可能ならばフルCSSでやりたいなぁと思っての質問です(表組みの場所ではなく、あくまでデザイン都合上でのレイアウトなので、理想論的にはtableレイアウトにするべきではないと思うので)。

実現方法がなければ、仕方がないのでtableで組みたいと思いますが、僕の知らないワザがないものかなぁと(^^;

Javascriptでdivの幅を取得する方法は思い至りませんでしたが、Element.getDimensions()で実現できそうですね。tableで実現するのとどちらがスマートかなぁ……。悩みどころ。

IEに対応してない方法はちょっと難しいですね。

ありがとうございました。特にJSでの方法は気付かなかったので大変ありがたいです。

引き続き、CSSで実現できるワザをご存知の方がいないか、ご意見をお待ちします。


2 ● kn1967
●35ポイント ベストアンサー

IE6 と Firefox2.0だけしか確認しておりませんがいかがでしょうか?

<html>
<head>
 <style type="text/css">
 <!--
 body { font-size:12px;}
 div { border:solid 1px #000000; }
 #p1 { width:500px; background-color:#AA00AA; color:#FFFFFF}
 #d1 { width:500px; background-color:#AAAAAA;}
 /* FireFox2 */
 div.a,div.b { display:table-cell; white-space:nowrap; }
 div.c { display:table-cell; }
 /* IE6 */
 div.a,div.b,div.c { _display:inline-block; _float:left; }
 //-->
 </style>
</head>
<body>
 <p id="p1">幅の確認用</p>
 <div id="d1">
 <div class="a">あああああああああああああああああああああ</div>
 <div class="b">いいいいいいいいいいいいいいいいいいいいい</div>
 <div class="c">ううううううううううううううううううううう</div>
 </div>
</body>
</html>

・div.aの幅 + div.bの幅(左と中央の幅)が全体の幅(ここでは500px)に近すぎたり超えたりした場合は

div.bやdiv.cが改行された位置になりますので、何らかの方法でa+bの幅を規制する必要性があります。

・IEとFirefoxではpaddingやmarginで微妙な違いがありますので、もう少し微調整が必要になるかもしれません。

・CSSは後から書いたものが有効になりますので、先頭にアンダーバー(IEのみ認識します)をつけて

IEとFirefoxでは指定が変わるようにしています。ご存知かもしれませんが念のため・・・。


a+bの幅に対してある程度の規制が必要になるのはjavascriptでもtableでも同じです。

cssで苦労しても結構ですが、どうせ同じならシンプルにtableタグを用いるのが実用的には一番かもしれません。

◎質問者からの返答

なるほど、display:table-cellを使用することでテーブル組みを実現するということですね。

手元のソースにも組み込んでみて、うまくいくことを確認しました。

>a+bの幅に対してある程度の規制が必要

今回の案件では、a+bは最長でも150pxくらいしかならないことを想定しているので、全長を超えちゃうことはありません。説明が必要でしたね。すいません。

>cssで苦労しても結構ですが、どうせ同じならシンプルにtableタグを用いるのが実用的には一番かもしれません。

そうですねぇ……。

教えていただいたdisplay:table-cellを使う方法は、少なくともHTML側のソースはシンプルになるので、使う意味はあるんじゃないかと思います。

ただ、おっしゃるようにクロスブラウザ関連で調整が必要なのと、実は実装CSSに組み込んだところ別の個所で問題を誘発してレイアウトが崩れてしまう(今回の質問とは無関係)ことが判明したりして、手間取っています。

ここで整合性を取るのに苦労するくらいなら、面倒だからもうtableでやっちゃうかぁ、と思っているところです(^^;;

ともかく、質問した条件下での実装に関してはほぼ成功に辿り着いた気がしますので、これで〆ます。

ありがとうございました(^^)

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ