下記のようなHTMLおよびCSSがあります。

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;
}

回答の条件
  • 1人2回まで
  • 登録:2009/02/23 13:45:47
  • 終了:2009/03/02 13:50:03

回答(3件)

id:niwa-mikiho No.1

niwa-mikiho回答回数508ベストアンサー獲得回数382009/02/23 16:37:54

ポイント27pt

inner2 のあとに

<br class="break">

または

<div class="break"></div>

を入れて

.break{

  clear: both;

}

としておくか、



CSS に

.outer:after{

  content: ".";

  display: block;

  height: 0;

  clear: both;

  visibility: hidden;

}

を追記するとかどうでしょうか?

id:studystudy

そのようにすると、outerの縦幅はinnerの大きい方に合うのですが、innerの大きさはそのままになってしまいます。

innerのheightをそろえる方法はないのでしょうか?

2009/02/23 17:31:47
id:pahoo No.2

pahoo回答回数5960ベストアンサー獲得回数6332009/02/23 18:00:51

ポイント27pt

ちょっとキッチュな方法ですが、ご質問にあったCSSに下記を追加してみて下さい。

#outer {
    width: 800px;              /* これが必要 */
    margin: 0 auto;
    overflow: hidden;
}
#inner1, #inner2 {
    padding-bottom: 32768px;
    margin-bottom: -32768px;
}

追伸

コメントで紹介していただいた画像ファイルですが、「ご指定のページが見つかりません」とエラーが出ます。

id:studystudy

できました!ありがとうございます!(画像ファイルのご指摘もありがとうございます)

やっぱり、こういったトリッキーな方法を使うしかないんでしょうね。

2009/02/23 20:14:35
id:niwa-mikiho No.3

niwa-mikiho回答回数508ベストアンサー獲得回数382009/02/23 23:21:50

ポイント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>

id:studystudy

pahooさんと同じやり方ですね。やっぱりこのやり方が主流なのですねー

ありがとうございます。

2009/02/25 15:00:16
  • id:studystudy
    説明画像あげ損ねたのでURLを載せておきます(URLが間違っていたのを修正しました)
    http://f.hatena.ne.jp/studystudy/20090223172623

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

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

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

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