Авто высота контейнер с инлайн дивой в использовании плавающего

Question

Если у меня есть контейнер, с несколькими вложенной дивой:

<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, он все еще не работает.
Как заставить divs быть встроенными, а родительская граница все равно их обертывает.
Высота контейнера должна быть динамической, поэтому нет конкретных атрибутов высоты или 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

Я надеюсь, что я правильно понял ваши вопросы.

Вы можете добавить переполнение: авто; в .beat-container, тогда он будет обертывать содержимое.

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

    overflow: auto; 
} 

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

Если вы хотите использовать селектор последнего ребенка, чтобы предназначаться последний DIV с .beat вы должны предназначаться родителя .beat как все .beat оба первого ребенка и в последний раз -child родителя в вашей текущей структуре. , например. .beat-container> div: last-child> .beat Вы можете пойти с менее квалифицированным селектором для своего примера, но в более широком контексте это, вероятно, будет тем, что вы хотите.

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