inner1およびinner2の内容が可変な(つまりheightを固定しない)ときに、inner1とinner2のheightをどちらか大きい方にあわせたいのですが、うまくいきません。どのようにしたらよいでしょうか？
<div id="outer">
<div id="inner1">
inner1
</div>
<div id="inner2">
inner2<br />
inner2
</div>
</div>
#inner1 {
float: left;
background-color: #777;
}
#inner2 {
float: left;
background-color: #AAA;
}
No.1
516
40
27pt
inner2 のあとに
<br class="break">
または
<div class="break"></div>
を入れて
.break{
clear: both;
}
としておくか、
CSS に
.outer:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
を追記するとかどうでしょうか？
No.2
5960633
27pt
ちょっとキッチュな方法ですが、ご質問にあったCSSに下記を追加してみて下さい。
4
4
#outer {
width: 800px; /* これが必要 */
margin: 0 auto;
overflow: hidden;
}
#inner1, #inner2 {
padding-bottom: 32768px;
margin-bottom: -32768px;
}
コメントで紹介していただいた画像ファイルですが、「ご指定のページが見つかりません」とエラーが出ます。
できました！ありがとうございます！(画像ファイルのご指摘もありがとうございます)
やっぱり、こういったトリッキーな方法を使うしかないんでしょうね。
No.3
51640
26pt
意味を少々間違えてました。
<style>
div#outer {
width: 660px;
border: 1px solid #0000ff;
}
ul#box {
margin: 0;
padding: 0;
overflow: hidden;
zoom: 1;
}
ul#box li {
float: left;
width: 100px;
margin: 0 20px -32768px 0;
padding: 0 0 32768px;
list-style: none;
border: 1px solid #00ff00;
background: #CEDBEA;
}
</style>
</head>
<body>
<div id="outer">
<ul id="box">
<li>昨日今日明日変わり行く私</li>
<li>そうだ、京都へ行こう</li>
<li>昔の友は今も友。 俺とお前と大五郎</li>
</ul>
setset<br>
</div>
pahooさんと同じやり方ですね。やっぱりこのやり方が主流なのですねー
ありがとうございます。
studystudy
2009/02/23 20:09:55
1
そのようにすると、outerの縦幅はinnerの大きい方に合うのですが、innerの大きさはそのままになってしまいます。
innerのheightをそろえる方法はないのでしょうか？