防止浮动 div 换行到新行

Question

我已经在 SO 上看到过几次这样的问题，并且给出了相同的答案，这在我的 Chrome 或 Firefox 中不起作用。

我想让一组左浮动的 div 跑出来，水平方向是一个带有水平滚动条的父 div。

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

但是，从 SO* 上给出的答案来看，这应该可行，但对我来说却不行。 http://jsfiddle.net/ajkochanowicz/tSpLx/2/

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

*例如Prevent floated divs from wrapping to next line

Answer 1

这个问题已经问了很久了，但仍然在搜索引擎结果中显示得很高。因此，我觉得添加新答案仍然有用。现在也可以通过使用 flexbox（现在有不错的浏览器支持）来实现所需的结果，而无需为父级设置固定宽度。

使用示例中的类名（现在有点偏离，因为元素实际上不再浮动）：

.float-wrap {
  display: flex;
  flex-wrap: nowrap;
}

.left-floater {
  flex: 0 0 100px;
}

.outer {
  overflow-x: auto
}

Answer 2

这应该是你所需要的。

    .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 提供滚动条，并根据窗口宽度调整大小。

Answer 3

在绝对定位的元素周围使用第二个包装器。然后你可以浮动单个项目。

<style type="text/css">
    #outter {
        position: relative;
        width: 500px;
        height: 200px;
        overflow: scroll;
    }
    #inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 1000px;
        height: 200px;
    }
    #inner .item {
        float: left;
        display: inline;
    }    
</style>

<div id="outter">
    <div id="inner">
        <div class="item">Item #1</div>
        <div class="item">Item #2</div>
        <div class="item">Item #3</div>
    </div>
</div>

您必须根据其中的项目数量调整#inner 的宽度。如果您知道项目数或在页面加载后使用 javascript，这可以在加载时完成。