CSS-如何保持浮动子元素超出其父级宽度

Question

有子元素的CSS方法是什么，即： .sub （绿色div）始终向左浮动而不管第二视线是什么，而不管视口是什么？

换句话说，我想将N个子元素浮动到左侧，当它到达其父容器的宽度时，要保持浮动状态，以一行显示隐藏溢出。

我以为可以通过设置overflow: hidden在父容器上overflow: hidden做到这一点，但是我必须在这里缺少其他CSS属性才能完成所需的行为。

<div class="container">
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  ...... more .sub divs below
</div>


body {
    background-color: blue;

}

.container{
  background-color: red;
  width: 100%;
  height: 300px;
  display: block;
  overflow: hidden;
}

.sub {
  float: left;
  background-color: green;
  width: 120px;
  height: 50px;
  margin: 3px;
}

Answer 1

您可以使用flex（ flex-wrap的初始值为nowrap ）

 body { background-color: blue; } .container{ background-color: red; width: 100%; height: 300px; display: flex; overflow: hidden; } .sub { background-color: green; height: 50px; margin: 3px; flex:0 0 120px; } 

 <div class="container"> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> </div> 

---

您可以在.sub元素上使用display:inline-box并将其容器设置为white-space:nowrap （ 需要删除节点之间的空格，或在容器上使用诸如font-size:0类的技巧，等等 ）

 body { background-color: blue; } .container{ background-color: red; width: 100%; height: 300px; overflow: hidden; white-space:nowrap; } .sub { background-color: green; height: 50px; margin: 3px; width:120px; display:inline-block; white-space:normal; } 

 <div class="container"><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div>