【ＣＳＳ】floatで左右に並べた<div>を下揃えにできますか？

解決済

質問者：takosuke88
質問日時：2006/02/05 10:38
回答数：2件

ＣＳＳ(スタイルシート)においてfloatで２つのdivを左右に並べる方法は定番ですが、この２つのblockレベル要素は高さが違えば下部が不ぞろいになります。
これは仕方ないとして、上部が不揃いになってもいいので下揃えにできませんでしょうか？
text-align:bottom;やvertical-align:bottom;ではできませんでした。tableを使えば可能でしょうが今回はtableなしという事でお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： harlan
回答日時：2006/02/06 05:26

> ４つ目の方法はなるほどと思いましたが左の文字が多い場合、Ｌ字型になってしまいました

4つ目の方法なら検討の価値ありと、思われるのなら、以下のサイトに、左の文字が多い場合の書き方と、
どちらのdivの文字が多くても段組が崩れない方法が紹介されています。
簡単に書くと、下に float:clear を使ったダミーのdivを追加する、というものです。
フッターに使っているdivがあるならば、それを利用してもいいと思います。

http://allabout.co.jp/computer/hpcreate/subject/ …
（私が書いた4つ目の方法は、このサイトのパクリです）

CSSだけで段組を・・・というのは、ちょっとした事でレイアウトが崩れてしまうという、
難しい問題がありますね。
私はまだ、真剣に検討した事がないので詳しくは知りませんが、position:absolute を使っての
解決方法があるのかも知れません。

参考リンク
http://css.uka-p.com/
http://desperadoes.biz/style/dan/index.php
http://msugai.fc2web.com/web/CSS/colup.html

- 0
- 件

通報する

この回答へのお礼

なるほど。いろいろありますね～
よく読んで　勉強してみます。
ありがとうございました！

通報する

お礼日時：2006/02/06 23:36

No.1

回答者： harlan
回答日時：2006/02/05 17:37

divなどのブロック要素を下揃えにする、すっきりした方法は思いつきません。

高さが揃っていればいい、というのであれば、絶対値で高さを指定してしまう、
という安易な方法はなしですか？

<html><head>
<style type="text/css"></style>
</head>
<body>
<div class="left">あいうえお</div>
<div class="right">あ<br>い<br>う<br>え<br>お</div>
</body></html>

左右のdivをひと回り大きなdivで囲んでしまえば、中のdivの高さが変わっても、height: 100%
としておけば、左右のdivの高さは揃います。外のdivの絶対値指定は必要です。

<html><head>
<style type="text/css"></style>
</head>
<body>
<div class="out">
<div class="left">あいうえお</div>
<div class="right">あ<br>い<br>う<br>え<br>お</div>
</div>
</body></html>

どうしても、下揃えにしたいのなら、高さを絶対値指定して、margin-top を自分で計算する
という方法しか思いつきません。

<html><head>
<style type="text/css"></style>
</head>
<body>
<div class="out">
<div class="left">あいうえお</div>
<div class="right">あ<br>い<br>う<br>え<br>お</div>
</div>
</body></html>

divに枠線を使っていないなら、外のdivの方に背景色を付けることで、見た目だけ
高さが揃っているようになります。これだと、高さを絶対値で指定する必要はありません。
（枠線を付けると、インチキがバレます。）

<html><head>
<style type="text/css"></style>
</head>
<body>
<div class="out">
<div class="left">あいうえお</div>
<div class="right">あ<br>い<br>う<br>え<br>お</div>
</div>
</body></html>

- 0
- 件

通報する

この回答へのお礼

こんなにたくさんありがとうございます。
４つとも検証させていただきました。内容物が大きさ固定の画像ならいいのですが、大きさを固定できない文字の場合、どれも膨張時に不具合が発生してしまうようですね。膨張をみこして余裕をもたせるとそれはそれで不自然ですし…
４つ目の方法はなるほどと思いましたが左の文字が多い場合、Ｌ字型になってしまいました…
やっぱtableしかないのですかねえ～

通報する

お礼日時：2006/02/06 00:05

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！