負利潤率工作中，而不是在裏面的內容吧

我有一個網站標題是兩個部分：左，右，與左邊130px高，右邊185px高。我使用浮動來放置這些。

我在左邊的頭部下面有一個內容，我想向上移動，所以它立即位於左邊的標題下方。當我給這個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; 
}

來源

2013-03-12 Ray

我認爲一個超過1k代表的SO用戶會知道發佈一些代碼。 ;-) – isherwood 2013-03-12 18:56:46

我建議你嘗試增加右側標題的高度，看看div的內容位置是否依賴於右側標題的高度。 – Gman 2013-03-12 19:01:02

@Gman - 如果我將右側的高度從185px增加到200px，那麼邊框和div內的內容（只是一些文本）都會下拉15px。 – Ray 2013-03-12 19:09:55

不要用消極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-12 19:34:49 Gman

謝謝。如果我只是指定一個寬度，比如說300px，那怎麼不夠呢？ – Ray 2013-03-12 19:47:22

另外，如果我想這個div低於其他2，即以堆疊的方式，是不是一般的方法不漂浮它？ – Ray 2013-03-12 19:47:55

'如果我只是指定一個寬度，比如說300px，那怎麼不足夠' 有點複雜：文本（'inline'）部分嵌套在div（'block'）中，所以文本邊界是設置爲上面一行的最低點（這是浮動div的行）。 – Gman 2013-03-12 19:54:12

如果你想在沒有任何硬編碼偏移的情況下實現真正的平滑堆棧，你應該真正做的是使用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：

。清楚：兩者都清楚; line-height：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-12 20:18:11 Gman

嗯，這對我來說並不明顯。爲什麼leftHeader會得到一個float：對嗎？ – Ray 2013-03-12 20:48:32

負利潤率工作中，而不是在裏面的內容吧

回答

相關問題