当浏览器重新调整大小以使视口变小时,如何使彼此相邻的DIV不会被包裹？

div {
  float: left;
}

例如,当浏览器完全最大化时,divs排列如下:

|div| |div| |div| |div| |div| |div| |div| |div|

但是当浏览器重新调整大小时会发生这种情况:

|div| |div| |div| |div| |div|
|div| |div| |div|

div当浏览器重新调整大小时,如何使s不包装？

我想在水平滚动div中显示一些记录.我正在使用Twitter Bootstrap并设置了一个div行,每个数据记录都表示为一列.

如果我需要为这部分转储Bootstrap网格那么这很好,我并没有按照设计的方式使用它我怀疑...如果我不使用Twitter Bootstrap这部分那么我的问题几乎完全相同防止浮动的div包装到新行.在这个问题上接受的答案的问题是,它假设您可以计算容器的总宽度.在我的例子中,项目div的数量是动态的.

我正在寻找一个纯CSS/HTML解决方案.如果需要Javascript,我使用的是没有jQuery的AngularJS.

我的例子:http://jsfiddle.net/V5zWT/2/

CSS

.DocumentList
{
    overflow-x:scroll;
    overflow-y:hidden;
    height:200px;
    width:100%;
    padding: 0 15px;
}

.DocumentItem
{
    border:1px solid black;
    padding:0;
    height:200px;
}

HTML

<div class="DocumentList"> 
    <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
            Record 12345
            <br/>
            More data
            <br />
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
            Record 12345
            <br/>
            More data
            <br />
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
            Record 12345
            <br/>
            More data
            <br />
        </div>
        <div class="col-xs-3 col-sm-3 …

这是我的网站,首先:

www.kaiserroof.com/test/index2.html

所以这是我的问题.您会注意到,在页面中间的分隔栏下方,有三列,一列带有表单,一列带有文本,一列带有链接.现在,将窗口调整为稍微小一些,右边的div将下拉到下一行.反正有没有显示那个？所以,他们的div会调整(我有一个液体布局)直到他们不适合的点,然后,而不是将div包装到下一行,它只是不会显示？

我希望这是有道理的.任何帮助将不胜感激.

我试图justify-content: flex-end;在 IE11 中为溢出隐藏的 DIV 内容工作，但没有成功。

在尝试了几种组合后，我创建了一个在 Chrome 中有效但在 IE11 中无效的最小片段：

.token-container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  box-shadow: 1px 1px 2px 1px silver inset;

  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  //align-content: flex-end;
}
.token {
  display: inline-block;
  border: 1px solid silver;
  margin: 1px 3px 0 0;
  border-radius: 4px;
  height: 19px;
  padding: 0 3px;
}

<div class="token-container">
  <div class="token">
    <span class="token-text">t-bone</span>
  </div>
  <div class="token"><span class="token-text">hamburger</span></div>
  <div class="token"><span class="token-text">pancetta</span></div>
  <div class="token"><span class="token-text">leberkäs</span></div>
  <div class="token"><span class="token-text">bacon</span></div>
</div> …

我知道这个问题已经被问过(1,2,3,4,5,6),但这些解决方案似乎是为我工作.

HTML

<div class="wrapper">
    <img src="http://imgur.com/5dEdRvCs.png" />
    <div>
        Lorem ipsum dolor sit amet, consectetur fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

CSS

.wrapper > *{
    float: left;
}

的jsfiddle

我想无论是img和div包装下float left,并与所有为占用所有剩余空间在页面上,这样的文字的div:

相反它看起来像这样:

我已经尝试添加overflow: hidden到包装器,尝试了一些width和min-width设置,但无济于事.

在CSS中必须有一些相对简单的方法来实现这一点.