防止浮动的div包装到新行

Question

我已经在SO上看过几次这样的问题,并且给出了相同的答案,这些答案在Chrome或Firefox中无效.

我想让一组左浮动的div运行,水平的父div与水平滚动条.

我能够在这里展示我想用这个糟糕的内联css做什么:http://jsfiddle.net/ajkochanowicz/tSpLx/3/

但是,根据SO*给出的答案,这应该有效,但不是我的结论. http://jsfiddle.net/ajkochanowicz/tSpLx/2/

有没有办法在不定义每个项目的绝对定位的情况下做到这一点？

*例如防止浮动的div包裹到下一行

Answer 1

这应该是你所需要的.

    .float-wrap {
      /* 816 = <number of floats> * (<float width> + 2 * <float border width>) */
      width: 816px;
      border: 1px solid;
      /* causes .float-wrap's height to match its child divs */
      overflow: auto;
    }
    .left-floater {
      width: 100px;
      height: 100px;
      border: 1px solid;
      float: left;
    }
    .outer {
      overflow-x: scroll;
    }

<div class="outer">
  <div class="float-wrap">
    <div class="left-floater">
      One
    </div>
    <div class="left-floater">
      Two
    </div>
    <div class="left-floater">
      Three
    </div>
    <div class="left-floater">
      I should be to the <s>left</s> right of "Three"
    </div>
    <div class="left-floater">
      I float.
    </div>
    <div class="left-floater">
      I float.
    </div>
    <div class="left-floater">
      I float.
    </div>
    <div class="left-floater">
      I float.
    </div>
  </div>
</div>

.float-wrap为divs 保持空间开放.因为它总是保持至少足够的空间来保持它们并排,所以它们永远不需要包裹..outer提供滚动条,大小与窗口的宽度相同.