CSS - 使div水平对齐

我有一个宽度和高度固定的容器div,溢出:隐藏.

我想要一个水平的float行:在这个容器中留下div.左侧浮动的Div将在读取其父级的右边界后自然地推到下面的"线"上.即使父级的高度不允许这样,也会发生这种情况.这是这样的:

![错误] [1] - 删除了被广告替换的图像小屋图像

我希望它看起来如何:

![右] [2] - 删除了已被广告替换的图像小屋图像

注意:我想要的效果可以通过使用内联元素和白色空间来实现:无包装(这就是我在显示的图像中的方式).然而,这对我来说并不好(因为这里解释的原因太长),因为子div需要浮动块级元素.

您可以在容器中放置一个足够宽的内部div来容纳所有浮动的div.

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

#foo {
  background: red;
  max-height: 100px;
  overflow-y: hidden;
}

.bar {
  background: blue;
  width: 100px;
  height: 100px;
  float: left;
  margin: 1em;
}

#container {
  position: absolute;
  clip: rect(0px,200px,100px,0px);
  overflow: hidden;
  background: red;
}