具有標記約束的CSS定位（邊距/填充）

我有兩個坐在彼此下面的兄弟div，它們都包含在同一個父div中。具有標記約束的CSS定位（邊距/填充）

要求是divs之間需要一定的空間，比如說20px，但是內部div和父div之間的空間需要在所有面上都是相同的（top，right，bottom，left ），在這種情況下是0px。

這裏的約束是內部div需要有完全相同的標記，所以我不能將其他類應用於其中的一個。此外，我不能在子div之間添加任何標記，也不能在子div之上或之下添加任何標記。

在跨瀏覽器兼容的方式下，用CSS（無javascript）解決這個問題的好方法是什麼？

謝謝！

2010-08-13 Jaap

#parentdiv div { 
    margin-top: 20px; 
} 

#parentdiv div:first-child { 
    margin-top: 0; 
}

應該這樣做。或者，你可以嘗試

#parentdiv div + div { 
    margin-top: 20px; 
}

要使用的解決方案取決於的browers的支持無論是:first-child僞類，或者+相鄰的選擇的。任何現代瀏覽器（因此，折扣IE6）應支持兩者。

來源

2010-08-13 13:42:37 igor

注意：第一個孩子僞類和相鄰選擇器在IE6上不工作 – 2010-08-13 13:46:20

感謝易江指出了這一點。我想沒有純粹的CSS解決方案來解決這個問題的IE6，而不訴諸額外的標記。 – igor 2010-08-13 13:49:27

不幸的是，它需要工作在IE6以及 – Jaap 2010-08-13 13:51:46

你可以在他們之間插入另一個div並使其高度爲20px？或者是把第一個內部div放到一個新的div中，然後讓新的div底部邊距爲20px是一個可接受的解決方案？

來源

2010-08-13 13:45:04 pootzko

正如其他人已經指出的那樣，您不能使用純CSS的方法，這將在IE6中起作用。但是，爲什麼不使用精縮，基本jQuery框架 - 沒有用戶界面將是微小的 - 然後你可以調用的第一個孩子，並申請保證金到：

$("#parentdiv:first").css({ marginTop: 0 })

你已經應用了這樣margin-top：20px;在你的CSS中，現在你只是從第一個孩子中刪除它。我知道你說過你不需要javascript方法，但是你沒有多少選擇，除非你願意重新設計ie6併爲我們恢復它。

希望這可以幫助某個地方的人。

來源

2010-08-13 14:07:41 SimonDowdles

兩個div坐在對方下面？你的意思是它們是垂直堆疊的，一個在另一個之上？只要你沒有在父div上填充，Margin-top就會這樣做。

試試這個例子。

<html> 
<head> 
<style> 
div.parent { 
    background-color: #AAA; 
} 
div.child { 
    background-color: #CCC; 
    margin-top: 20px; 
} 
</style> 
</head> 
<body> 
<div class="parent"> 
    <div class="child">&nbsp;</div> 
    <div class="child">&nbsp;</div> 
</div> 
</body> 
</html>

你會注意到，只要第一個孩子的父母上面沒有任何東西，它的利潤不會擴展父母div。

如果它們是並排的並且浮動是不同的故事，則左側的邊距不會與邊緣頂部相同。你可能可以在兩個div上使用margin-right，但是修改父級的寬度並將overflow設置爲hidden以便切斷擴展邊界 - 但我不確定這種事情的兼容性。

你確定你沒有辦法區分兩個div嗎？找到解決這個問題的方法可能會幫助你很多。

來源

2010-08-13 14:09:30 Andrew

具有標記約束的CSS定位（邊距/填充）

回答

相關問題