1218969843 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を%でも指定できない
という状況で、上記のようなレイアウトを実現する方法はないでしょうか?

回答の条件
  • 1人2回まで
  • 登録:2008/08/17 19:44:05
  • 終了:2008/08/18 10:46:40

ベストアンサー

id:kn1967 No.2

kn1967回答回数2915ベストアンサー獲得回数3012008/08/18 06:17:12

ポイント35pt

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タグを用いるのが実用的には一番かもしれません。

id:nacbox

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

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

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

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

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

そうですねぇ……。

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

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

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

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

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

2008/08/18 10:46:21

その他の回答(1件)

id:pntswrks No.1

pntswrks回答回数12ベストアンサー獲得回数12008/08/17 21:07:31

ポイント35pt

これは必ずフル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から対応)


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

id:nacbox

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

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

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

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

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

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

2008/08/17 21:35:53
id:kn1967 No.2

kn1967回答回数2915ベストアンサー獲得回数3012008/08/18 06:17:12ここでベストアンサー

ポイント35pt

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タグを用いるのが実用的には一番かもしれません。

id:nacbox

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

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

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

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

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

そうですねぇ……。

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

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

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

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

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

2008/08/18 10:46:21

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません