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，我得到了我需要的功能，它们并排在哪里。将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＆gt; div：last-child＆gt; 。击败您可以使用不太合格的选择器作为示例，但在更大的背景下，它可能就是您想要的。

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

自动高度容器，在使用浮动中具有内联div

1 个答案: