CSS相對容器不符合保證金子元素

我想有一個包含每個一些子元素與利潤率相對容器元素。

如果我不設置容器的高度，它將通過其包含的子項來調整高度/寬度。

問題是它似乎忽略了它們的邊距。

這裏的一些代碼： CSS：

.container{ 
    position:relative; 
} 

.child { 
    position:relative; 
    float:left; 
    width:200px; 
    height:50px; 
    margin-bottom:20px; 
}

HTML：

<div class="container"> 
     <div class="child">hello world</div> 
    </div>

容器現在應該調整高度，以50 + 20 = 70像素，所以如果我把另一下面的元素應該可以，但事實並非如此。保證金似乎不能調整容器高度，如何改變這個？

來源

2013-04-29 marius

沒有得到你的問題安靜很好，但你可能缺少清除floats ...

Demo

.container{ 
    position:relative; 
    border: 1px solid #f00; 
    overflow: hidden; 
}

另外，您還可以使用clear: both;

Demo

來源

2013-04-29 10:28:27

啊該死使用填充底部，而不是下邊距我繼承了我的容器的高度和設置兒童的寬度+邊距獨立於此...它實際上效果不錯 – marius 2013-04-29 10:36:54

@marius酷:) – 2013-04-29 10:37:57

根據在你試圖達到的效果上，要麼是：

1）添加 '溢出：隱藏' 的.container DIV

或

2）在.child DIV

來源

2013-04-29 10:53:15

CSS相對容器不符合保證金子元素

回答

相關問題