自動高度容器漂浮的

Question

如果我有一個容器，有幾個嵌套的div：

<div class="beat-container" id="beat-container-1"> 
    <div id="1-1"> 
    <div class="beat" id="beat-1-1"> 
     I am a beat View<br> 
    </div> 
    </div> 
    <div id="1-2"> 
    <div class="beat" id="beat-1-0"> 
     I am a beat View<br> 
    </div> 
    </div> 
    <div id="1-3"> 
    <div class="beat" id="beat-1-0"> 
     I am a beat View<br> 
    </div> 
    </div> 
</div> 

我用浮於所有，但最後一個孩子，我得到我所需要的功能，它們並排在一起。將float:left添加到最後一個可以防止封閉的父容器纏住所有的孩子，並且失去它的高度。

如果我將它添加到所有它們，然後嘗試添加一個:last-child它仍然不起作用。
如何讓div內聯，並讓父邊框仍然包裹它們。
容器高度應該是動態的，所以沒有特定的高度屬性或JS。

CSS：

.beat-container { 
    border: 1px solid orange; 
    padding: 5px; 
    margin: 5px; 
} 

.beat { 
    display: inline-block; 
    border: 1px solid purple; 
    float: left; 
} 
.beat :last-child { 
    float: none; 
} 

/* .beat :not(:last-child) { 
    display: inline-block; 
    border: 1px solid purple; 
    float: left;  
} */ 

Fiddle

Answer 1

我希望我理解正確的話您的問題。

您可以添加溢出：auto;到.beat-container然後它將包裝內容。

.beat-container { 
    border: 1px solid orange; 
    padding: 5px; 
    margin: 5px; 

    overflow: auto; 
} 

http://fiddle.jshell.net/g3L3w/2/

如果你想利用最後孩子選擇的目標與你有.beat的最後一個div目標.beat母公司所有.beat都是第一胎和最後 - 當前結構中父項的子項。 例如.beat-container> div：last-child> .beat 你可以使用一個不太合格的選擇器作爲例子，但是在更大的背景下，它可能就是你想要的。

http://fiddle.jshell.net/g3L3w/4/