对齐嵌套div的正确方法?

时间:2009-06-15 19:06:39

标签: css html

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

我有

 <div>
      <div>

      </div>
 </div>

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

5 个答案:

答案 0 :(得分:8)

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

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

答案 1 :(得分:2)

选项1:

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

选项2:

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



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

margin: top right bottom left;

答案 2 :(得分:1)

将外部div的定位上下文设置为“relative”,然后您可以将任何内部内容移动到w / position:absolute。使用您的标记,CSS将是:

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

答案 3 :(得分:1)

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

div2 {
  margin: 0px;
}

其中div1是outter div而div2是内部div。应该这样做。我认为这种方法比弄乱绝对和相对定位等更安全......

答案 4 :(得分:-1)

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

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

相关问题