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

CSSで質問です。

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

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

●質問者: makocan
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS サイズ ブロック マークアップ リスト
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● y-kawaz
●35ポイント

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

<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


2 ● Q-A
●35ポイント

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

関連質問


●質問をもっと探す●



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