給孩子的div相對於父DIV

保證金這是我的html：給孩子的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？

來源

2014-09-21 user2719875

'的位置是：絕對的;'到'.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，它會根據需要應用保證金。

來源

2014-09-21 21:28:24

任何方式來做到這一點，如果我不想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;。

來源

2014-09-21 21:29:18 dsketch21

也許這可以幫助：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/

來源

2014-09-21 21:32:30 algorhythm

我想要做到這一點，而不必將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%; 
    }

來源

2014-09-21 21:33:35 CH3M

給孩子的div相對於父DIV

回答

相關問題