防止浮动的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为div保持空间开放。 因为它总是保持至少足够的空间来保持它们并排，所以它们永远不需要包裹。 .outer提供滚动条，大小与窗口的宽度相同。

Answer 2

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

使用示例中的类名（由于元素实际上不再浮动，因此现在有点关闭）：

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

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

.outer {
  overflow-x: auto
}

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，则可以在加载时完成此操作。