CSSで質問です。


<div id="test">
<div id="test2">
写真を含むdiv
</div>
<div id="test3">
材料リスト
 材料リスト2
</div>
</div>

上記の様なマークアップで
背景画像を使わずに、test2とtest3の色違いのブロックの
縦のサイズをあわせるにはどうすればいいでしょうか?

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2008/02/28 01:36:29
  • 終了:2008/03/06 01:40:02

回答(2件)

id:y-kawaz No.1

y-kawaz回答回数1420ベストアンサー獲得回数2252008/02/28 11:34:24

ポイント35pt

こんなんでどうでしょう?

<html>
<head>
<style type="text/css">
.soroeru {
	width:400px;
	margin:0 auto;
	overflow:hidden;
}
.soroeru:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.soroeru_child {
	float:left;
	padding-bottom:32768px;
	margin-bottom:-32768px;
}
#test2 {
	width:200px;
	background:lightpink;
}
#test3 {
	width:200px;
	background:lightblue;
}
</style>
</head>
<body>

<div class="soroeru">
  <div id="test2" class="soroeru_child">
    写真を含むdiv
  </div>
  <div id="test3" class="soroeru_child">
    材料リスト<br />
    材料リスト2
  </div>
</div>

</body>
</html>

soroeru と soroeru_child が高さを揃える用のクラスです。

#test1 と #test2 は各divの背景色を変える為のものです。


一応解説を入れると、

・子要素であるsoroeru_childのボックスの下側paddingを巨大にしてそれと同じ分マイナスmarginすると下に長い帯のようなDIVが横に並ぶことになります(横に並ぶのはfloat:leftの効果です)

・それをさらに、はみ出た分を親のsoroeruクラスでoverflow:hiddenして無かったことにすることで高さを揃えています。

トリッキーに見えますが結構便利な指定方法です。

http://q.hatena.ne.jp/answer

id:Q-A No.2

Q-A回答回数106ベストアンサー獲得回数162008/02/28 12:23:31

ポイント35pt

html部分はそのままで、以下のcssを適用させてください。

body{text-align:center;}

#test{

margin:0 auto;padding:0;

background:#efefef;

width:740px;

overflow:auto;

}

#test2{

background-color:#efefef;

width:370px;

_width:740px;

border-right:370px solid #e79221;

margin-right:-370px;

float:left;

}

#test3{

background-color:#e79221;

width:370px;

float:left;

}


http://www.k5.dion.ne.jp/~i-araki/css/gijihaikei.html

コメントはまだありません

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

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

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

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