自动高度容器漂浮的

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/