我有一个固定宽度和高度的容器div，溢出：隐藏。

我想要水平行的float：在此容器内的左div。左浮动的Divs在读取其父级的右边界后自然会推到下面的"行"上。即使父母的身高不允许这样做，也会发生这种情况。这是这样的样子：

！[错误] [1]删除了已被广告替换的图片棚屋图片

我希望它看起来如何：

！[右] [2]删除了已被广告替换的图片棚屋图片

注意：我想要的效果可以通过使用内联元素和空白：no-wrap来实现(这就是我在所示图像中所做的事情)。但是，这对我不利(由于冗长的原因，在这里无法解释)，因为子div需要浮动块级元素。

解决方案

回答

这似乎接近我们想要的：

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

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

<div id="foo">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

回答

我们可以使用clip属性：

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

请注意，为了使"剪辑"正常工作，需要使用"位置：绝对"和"溢出：隐藏"。

回答

我们可以在容器中放置一个足够容纳所有浮动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;
}

<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>