餃子を食べるとき、何をつけますか？

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

解決済

  • 質問者：takosuke88
  • 質問日時：
  • 回答数：2件

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

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： harlan
  • 回答日時：

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



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
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2006/02/06 23:36

No.1

  • 回答者： harlan
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2006/02/06 00:05

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

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報