给孩子的div相对于父DIV

问题描述：

<div class='parentDiv'> 
    <div class='childDiv'></div> 
</div>

，这是我的CSS：

.parentDiv { 
    margin-top: 200px; 
    width: 700px; 
    height: 800px; 
    background-color: red; 
} 

.childDiv { 
    background-color: green; 
    width: 50px; 
    height: 50px; 
    margin-top: 22px; 
}

小提琴：http://jsfiddle.net/1whywvpa/

为什么childDiv呢没有得到22px的margin-top？如果像素大于已经赋给parentDiv的200px，它只会得到一个页边距。任何方式使childDiv获得相对于parentDiv的22px的父级div，而无需执行某种类型的“给父级div添加1px填充”hack？

'的位置是：绝对的;'到'.childDiv'将会工作，但我不确定你会使用它。 – Anonymous 2014-09-21 21:27:47

@MaryMelody是啊我不想使用position：absolute; – user2719875 2014-09-21 21:28:14

将'display：inline-block;'设置为'.childDiv'或'.parentDiv' - http://jsfiddle.net/1whywvpa/2/ – Anonymous 2014-09-21 21:29:27

答

看起来.childDiv没有左移。

如果你float: left;.childDiv，因为我在JS Fiddle，它会根据需要应用保证金。

任何方式来做到这一点，如果我不想childDiv向左浮动？ – user2719875 2014-09-21 21:39:11

将'display：inline-block;'设置为'.childDiv'或'.parentDiv' - http://jsfiddle.net/1whywvpa/2/或http://jsfiddle.net/1whywvpa/6/ – Anonymous 2014-09-21 21:39:27

@MaryMelody Or给父母一个'overflow：hidden'或'padding-top：1px;'或'border-top：1px solid transparent;'。这是由[折叠边距]（https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing）造成的。 – 2014-09-21 21:43:21

答

在这种情况下，您不想使用保证金。你应该添加填充到父div。你还需要关闭你的父母div。所以删除子div上的margin-top:22px。在父div上添加padding-top:22px;。

答

也许这可以帮助：CSS Margins Overlap Problem

添加位置属性两个元素。家长是相对的，孩子是绝对...

.parentDiv { 
    position: relative; 
    margin-top: 200px; 
    width: 700px; 
    height: 800px; 
    background-color: red; 
    } 

.childDiv { 
    position: absolute; 
    background-color: green; 
    width: 50px; 
    height: 50px; 
    margin-top: 22px; 
}

这是你的提琴：http://jsfiddle.net/algorhythm/1whywvpa/5/

我想要做到这一点，而不必将childDiv设置为绝对位置或使其浮动。我发现'display：inline-block'对我来说是最好的解决方案。 – user2719875 2014-09-21 21:47:42

答

使孩子的div包含父DIV的百分比：

.parentDiv { 
    position: relative; 
    margin-top: 200px; 
    width: 700px; 
    height: 800px; 
    background-color: red; 
    } 

.childDiv { 
    position: absolute; 
    background-color: green; 
    width: 7%; 
    height: 6%; 
    margin-top: 1%; 
    }

给孩子的div相对于父DIV

相关推荐