0

（请注意，目前提供的答案尚不清楚）

我有一个网站标题，它分为两部分：左侧和右侧，左侧高 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;
}
4

2 回答 2

2

不要使用负数margin来改变元素的相对位置。改用position: relative; top: -60px;：

<div style="position: relative; top: -60px; padding:0;border: 1px dashed red;">
      some text that appears too low, not a top of div as expected some text that appears too low, not a top of div as expected some text that appears too low, not a top of div as expected
</div>

( http://jsfiddle.net/BMpqP/10/ ) 然后你可以用width: 600px;.

旧答案文本：所以，那是因为你的最后一个div宽度是 100% 并且没有被float编辑。（ 的默认行为div。）

当 div 不浮动时，其中的文本甚至在其外部也会与浮动 div 交互。如果您添加更多文本，您会看到 ( http://jsfiddle.net/BMpqP/6/ ) 文本不会与更高的其他标题发生冲突。

我提出的解决方案是浮动 div 并将其大小设置为：

<div style="margin-top:-60px; padding:0;border: 1px dashed red; float: left; width: 630px;">
    some text that appears too low, not a top of div as expected
</div>

那么文字就可以了，页面的主要内容也可以了：http: //jsfiddle.net/BMpqP/7/

于 2013-03-12T19:34:49.430 回答
0

如果您想要真正平滑的堆叠而没有任何硬编码的偏移量，那么您真正应该做的就是使用float: right;标题。（标题部分必须在标记中交换位置。）

    <div class="leftHeader">
        <div class="headerMissingEnd">
            <!-- img src="images/header.png" Title" width="750px" / -->
        </div>
    </div>

    <div style="padding:0;border: 1px dashed red;">
        some text that appears too low, not a top of div as expected some text that appears too low, not a top of div as expected some text that appears too low, not a top of div as expected
    </div>
</div>

和CSS：

.clear { 明确：两者；行高：0px；}

.page {
   width: 1005px;
   margin: 0px auto;
   color: #333;
   background-color: #fff;
}

.leftHeader {
    float: right;
    width: 630px; 
    margin: 0px auto;   

    background-color: black;

    opacity: 0.5;
 }

.rightHeader {
    float: right;
    width: 375px; 
    height: 185px;
    margin: 0px auto; 

    opacity: 0.5;

    background-color: navy;
 }

.headerMissingEnd {
    margin: 0px;
    width: 640px;
    height: 130px;
   background: url('images/header-left.png') no-repeat;
}
于 2013-03-12T20:18:11.970 回答