对齐嵌套div的正确方法？

Question

任何人都可以告诉我将嵌套div放在当前div上的最佳方法..基本上有2个div ...外部和内部..内部需要20像素，20像素下来形成当前..

我有

 <div>
      <div>

      </div>
 </div>

我尝试将内部div设置为相对和前20px并保持20px，它似乎在IE7中工作但在FF或IE8中不起作用

Answer 1

通常情况下，可以在外部的margin: 20px或<div>上设置padding: 20px，具体取决于您要查找的确切效果。

编辑：第二个想法，有太多方法可以完成许多与您的描述相符的非常相似的效果。也许你可以让你的问题更具体一点？ ： - ）

Answer 2

选项1：

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

选项2：

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

上面的例子有点冗长。如果需要，您可以使用简写：

margin: top right bottom left;

Answer 3

将外部div的定位上下文设置为“relative”，然后您可以将任何内部内容移动到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是内部div。应该这样做。我认为这种方法比弄乱绝对和相对定位等更安全......

Answer 5

将外部一个设置为position：relative，将内部设置为position：absolute，然后根据需要设置top和left。它将使用外部div作为其边界而不是页面。如果需要将其设置，请确保在两个div上都正确设置了z-index。

如果内部div为空，请确保定义宽度/高度，否则它不会出现在页面上。