- ベストアンサー
【ＣＳＳ】floatで左右に並べた<div>を下揃えにできますか？
ＣＳＳ(スタイルシート)においてfloatで２つのdivを左右に並べる方法は定番ですが、この２つのblockレベル要素は高さが違えば下部が不ぞろいになります。 これは仕方ないとして、上部が不揃いになってもいいので下揃えにできませんでしょうか？ text-align:bottom;やvertical-align:bottom;ではできませんでした。tableを使えば可能でしょうが今回はtableなしという事でお願いいたします。
- takosuke88
- お礼率82% (391/476)
- HTML
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> ４つ目の方法はなるほどと思いましたが左の文字が多い場合、Ｌ字型になってしまいました 4つ目の方法なら検討の価値ありと、思われるのなら、以下のサイトに、左の文字が多い場合の書き方と、 どちらのdivの文字が多くても段組が崩れない方法が紹介されています。 簡単に書くと、下に float:clear を使ったダミーのdivを追加する、というものです。 フッターに使っているdivがあるならば、それを利用してもいいと思います。 http://allabout.co.jp/computer/hpcreate/subject/msubsub_series_hpcreate05.htm （私が書いた4つ目の方法は、このサイトのパクリです） CSSだけで段組を・・・ というのは、ちょっとした事でレイアウトが崩れてしまうという、 難しい問題がありますね。 私はまだ、真剣に検討した事がないので詳しくは知りませんが、position:absolute を使っての 解決方法があるのかも知れません。 参考リンク http://css.uka-p.com/ http://desperadoes.biz/style/dan/index.php http://msugai.fc2web.com/web/CSS/colup.html
その他の回答 (1)
- harlan
- ベストアンサー率77% (234/303)
divなどのブロック要素を下揃えにする、すっきりした方法は思いつきません。 高さが揃っていればいい、というのであれば、絶対値で高さを指定してしまう、 という安易な方法はなしですか？ <html><head> <style type="text/css"><!-- .left { width: 200px; height: 200px; float: left; background-color: lightblue; } .right { width: 200px; height: 200px; background-color: lightpink; } --></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"><!-- .out { height: 200px; } .left { width: 200px; height: 100%; float: left; background-color: lightblue; } .right { width: 200px; height: 100%; background-color: lightpink; } --></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"><!-- .out { height: 200px; } .left { width: 200px; height: 100px; margin-top: 100px; float: left; background-color: lightblue; } .right { width: 200px; height: 100%; background-color: lightpink; } --></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"><!-- .out { width: 50%; background-color: lightblue; } .left { width: 50%; float: left; } .right { margin-left: 50%; background-color: lightpink; } --></style> </head> <body> <div class="out"> <div class="left">あいうえお</div> <div class="right">あ<br>い<br>う<br>え<br>お</div> </div> </body></html>
お礼
こんなにたくさんありがとうございます。 ４つとも検証させていただきました。内容物が大きさ固定の画像ならいいのですが、大きさを固定できない文字の場合、どれも膨張時に不具合が発生してしまうようですね。膨張をみこして余裕をもたせるとそれはそれで不自然ですし… ４つ目の方法はなるほどと思いましたが左の文字が多い場合、Ｌ字型になってしまいました… やっぱtableしかないのですかねえ～
お礼
なるほど。いろいろありますね～ よく読んで 勉強してみます。 ありがとうございました！