(请注意,目前提供的答案尚不清楚)
我有一个网站标题,它分为两部分:左侧和右侧,左侧高 130 像素,右侧高 185 像素。我使用浮动布局这些。
我在要向上移动的 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;
}