人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

下記のような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;
}

●質問者: studystudy
●カテゴリ:ウェブ制作
✍キーワード:777 AAA background-color CSS HTML
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● niwa-mikiho
●27ポイント

inner2 のあとに

<br class="break">

または

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

を入れて

.break{

clear: both;

}

としておくか、



CSS に

.outer:after{

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

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

◎質問者からの返答

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

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


2 ● pahoo
●27ポイント

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

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

追伸

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

◎質問者からの返答

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

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


3 ● niwa-mikiho
●26ポイント

意味を少々間違えてました。


<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さんと同じやり方ですね。やっぱりこのやり方が主流なのですねー

ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ