我正在關注In Search of the Holy Grail，但我無法理解步驟3中的實際情況。爲什麼左邊距會跳起來？

爲了解決問題，我禁用了「左」和「右」div的邊距/偏移量。這給你的內容在頂部，然後其他兩個元素並排坐在它下面，我期望[見P1]。

然後，我逐漸將「left」div的margin-left從0px減少到-199px，這也是我期望的[請參閱P2]。

但在-200px（左元素本身的寬度）時，它會跳到頂部[見P3]，左邊緣位於內容的右邊緣。我本來預計它會繼續走下坡路。

它爲什麼跳起來？如果沒有關於爲什麼的概念性解釋，它在哪裏描述了規範中的功能？

圖片：

P3

您使用<h2>標籤的左邊和右邊的標題，但在中心使用的是<h1>這就是爲什麼你，如果你想解決這個問題，這個問題

來源

2012-05-28 Lee

什麼是您使用的CSS代碼？ – CKKiller

記住，無論#content和#left（以及#right）是浮動的。

由於浮標的性質，它們（或其內容）可能會重疊。這在this section of the spec中有很好的描述，並且很容易理解。如果將負邊距應用於與另一個浮動物相鄰的浮動元素，它將簡單地向左移動（類似於具有left相對偏移量），超過其兄弟。

在float property的部分中，您會找到一份「管理浮動行爲的精確規則」的列表。現在，我並不是100％熟悉浮動模型，但這些點是我認爲相關的點：

2.如果當前框是左浮動的，並且存在任何左浮動框由源文檔中較早的元素生成，則對於每個此類較早的框，當前框的左側outer edge必須位於較早框的右側outer edge的右側，或者其頂部必須低於先前的底部框。類似的規則適用於右浮動框。

7.左浮動框左側有另一個左浮動框，右浮動框的右外邊緣可能沒有右浮動框右邊緣。（鬆散地：左邊的浮動物不能在右邊緣突出，除非它已經儘可能遠離左邊。）類似的規則適用於右浮動元素。

8.浮動箱必須儘可能高。

9.左浮箱必須放在儘可能遠的地方，右浮箱儘可能靠右。較高的位置優於比左/右更遠的位置。

所以我的猜測是：-200px的餘量，這是因爲你說#left元素本身的寬度的負等量，使其一路上浮並向權（而不是左邊），並擁抱本身也浮動的元素的邊緣。由於這個完全相等的負邊界，兩個元素的右邊緣相互接觸。因此，隨着您繼續增加（或減少？）負值餘量，您會看到#left元素繼續向左移動。

請注意，應用於#container元素的填充不會與邊距交互;即使您移除任何一邊或兩邊的填充，邊距也會以相同的方式進行交互。

_{注意還存在對在規範的連接部分，描述負利潤的行爲collapsing margins在部分的陳述，但這是無關緊要的，因爲我們關注的是這裏的利潤是水平的，屬於浮動元素，所以不會受到崩潰的影響。}

來源

2012-05-28 16:56:14 BoltClock

當然，根據規則2，P3應該是不可能的？當前（紫色）框的左邊緣位於文檔中較早的（灰色）框右邊緣的左側，其頂部不低於灰色框的底部。 – Lee

負邊距實際上會將其左邊緣向右推，因此，對當前邊框的寬度加上足夠的寬度可以使其貼合在前一個邊框的右邊緣上。既然它可以以這種方式「向上」浮動，那麼我看到它的方式就是這樣，因爲規則9說越高越好，越往左越好。 – BoltClock

負左邊緣不會將左邊緣向左推動嗎？較早的框是內容，其寬度爲100％，因此無法貼合右邊緣，因爲沒有空間？我是什麼理解錯誤？ – Lee

做一件事1所使用的所有<h2>標籤爲標題，如果你想使用然後應用下面的類上

h1 
{ 
margin-top:10px; 
}

來源

2012-05-28 16:23:13

他從哪裏說這是一個問題？ – BoltClock

這是什麼意思麻煩理解問題開始 –

爲什麼左邊距會跳起來？

P3

回答

相關問題