(提供された現在の回答は不明確であることに注意してください)
左と右の 2 つの部分に分かれた Web サイトのヘッダーがあります。左側の高さは 130 ピクセル、右側の高さは 185 ピクセルです。float を使用してこれらをレイアウトしました。
div の左ヘッダーの下にあるコンテンツを上に移動したいので、左ヘッダーのすぐ下にあります。この div に境界線を付けて負のマージンを指定すると、境界線が期待どおり上に移動します。ただし、div 内のコンテンツは上に移動していません。185px の下にぶら下がっています (明らかに右ヘッダーから)。このdivのパディングをゼロに設定していることに注意してください。私は何を間違っていますか?
最近のバージョンの Chrome または Firefox では機能しません。ありがとう。
関連する HTML コードは次のとおりです。
<body style="margin: 0px">
<div class="page">
<div>
<div class="leftHeader">
<div class="headerMissingEnd">
<!-- img src="images/header.png" Title" width="750px" / -->
</div>
</div>
<div class="rightHeader">
<div style="height:185px;padding:0px">
<canvas margin:"0" width="360px" height="185px" loop="true" fps="30" bgcolor="#ffffff" init="fn_canvas">
</canvas>
</div>
</div>
<br class="clear" />
</div>
<div style="margin-top:-60px; padding:0;border: 1px dashed red">
some text that appears too low, not a top of div as expected
</div>
CSS コード:
.clear {
clear: both;
line-height: 0px;
}
.page {
width: 1005px;
margin: 0px auto;
color: #333;
background-color: #fff;
}
.leftHeader {
float: left;
width: 630px;
margin: 0px auto;
}
.rightHeader {
float: left;
width: 360px;
height: 185px;
margin: 0px auto;
}
.headerMissingEnd {
margin: 0px;
width: 640px;
height: 130px;
background: url('images/header-left.png') no-repeat;
}