html - 防止 2 个宽度可变的 float sibling 包裹在容器内？

Question

我遇到了 float 问题。我有两个 div，我需要始终并排放置在同一条线上。当屏幕缩小时，它们不应该换行。一个必须向左浮动，另一个向右浮动。如果屏幕宽度太小而无法完全显示两个 div，则用户必须能够滚动主窗口以查看所有内容(滚动条应该位于用户期望的位置，而不是“内部”滚动条)。我只希望在两个 float div 不完全可见时滚动条可见——否则滚动条不应该可见。

问题是，即使我将容器设置为使用 white-space: none; 或 overflow: visible，div 仍然会换行。

我需要 div 始终保持内联。

重要提示:两个 float div 的内容宽度是可变的；为了演示，我硬编码了一些尺寸，但这些尺寸并不总是它们的尺寸。无论内容如何，​​div 都必须相互内联。

fiddle :http://jsbin.com/yidapiriya/edit?html,css,output

标记:

  <div class="container clearfix">
    <div class="content-container">
      <!-- the width/height of this div will be variable based on content... this is just hardcoded for demo purposes -->
      <div style="width: 400px; height: 400px;"></div>
    </div>
    <div class="ads-container">
            <!-- the width/height of this div will be variable based on content... this is just hardcoded for demo purposes -->
      <div style="width: 640px; height: 480px;"></div>
    </div>
  </div>

CSS:

* {
  box-sizing: border-box;
  outline: 1px solid black;
}

.container {
  white-space: nowrap;
  width: auto;
  max-width: 1600px;
  margin: 0 auto;
  height: auto;
  padding: 1rem 3.5%;
  overflow: hidden;
}

.content-container {
  width: auto;
  white-space: normal;
  margin-top: 2.5rem;
  float: left;
  display: inline-block;
  height: 25rem;
}

.ads-container {
  width: auto;
  display: inline-block;
  float: right;
  text-align: right;
}


.clearfix{ 

}
.clearfix:before {
  content: ' ';
  display: table;
}
.clearfix:after {
  clear: both;
  content: ' ';
  display: table;
}

Answer 1

据我了解你的问题你需要两个 div 是内联的，即使窗口调整大小设置 min-width: 到容器

.container {
  min-width: 1400px;
  ...
}

demo

更新

New Demo

.container {
  .....
  min-width:380px;
}

.container > div{
  display:inline-block;
  position: relative; 
  width: 50%; 
  float: left;
}