正確的方式來對齊嵌套的div？

Question

任何人都可以告訴我在當前div上放置一個嵌套div的最佳方法..基本上有2個div ...外部和內部..內部需要20個像素和20個像素向下形成當前..

我

<div> 
     <div> 

     </div> 
</div> 

我嘗試設置內的div相對的頂部20像素，並留下20像素，它似乎在IE7工作，但不是在FF或IE8

Answer 1

設置外一個位置：相對位置和內部位置：絕對位置，然後根據需要設置頂部和左側。它將使用外部div作爲邊界而不是頁面。如果您需要設置它，請確保您的z-index在兩個div上都正確設置。

如果內部div爲空，請確保您定義寬度/高度，否則它不會出現在頁面上。

Answer 2

通常情況下，您可以在內部的<div>或padding: 20px上設置margin: 20px，這取決於您要查找的具體效果。

編輯：第二個想法是，有太多方法可以完成許多與您的描述相符的非常相似的效果。也許你可以讓你的問題更具體些？ :-)

Answer 3

將外部div的定位上下文設置爲'相對'，然後您可以在w/position：absolute周圍移動任何內部內容。使用您的標記，在CSS是：

div { position: relative; } 
div div { position: absolute; top: 20px; left: 20px; } 

Answer 4

div1 { 
    padding-left: 20px; 
    padding-top: 20px; 
} 

div2 { 
    margin: 0px; 
} 

其中DIV1是outter DIV和DIV2是內格。這應該做到這一點。我覺得這種方法比用絕對和相對positionings和梅辛等安全...

Answer 5

選項1：

inner-div { margin-top: 20px; margin-left: 20px; } 

選項2：

outer-div { padding-top: 20px; padding-left: 20px; } 

以上的例子是有點冗長。如果你願意，你可以使用速記：

margin: top right bottom left;