css - 带有内联 div 的自动高度容器在使用 float an

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>

除了最后一个 child ，我对所有 child 都使用 float ，我得到了我需要的功能，他们并排在一起。将 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

希望我已经正确理解了您的问题。

你可以添加 overflow: auto; .beat-container 然后它将包装内容。

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

  overflow: auto;
}

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

如果你想使用 last-child 选择器来定位带有 .beat 的最后一个 div，你必须定位 .beat 的父级，因为所有 .beat 都是当前结构中父级的第一个子级和最后一个子级. 例如.beat-container > div:last-child > .beat 您可以为您的示例使用不太合格的选择器，但在更大的上下文中它可能就是您想要的。

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