防止 2 个宽度可变的浮动兄弟姐妹包裹在容器内？

Question

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

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

我需要 div 始终保持内联。

重要注意：两个浮动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

只需从 .ads-container 和 .content-container 中删除 float: left 和 float: right 并为 .container

设置 overflow: auto;

Answer 2

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

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

demo

更新

New Demo

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

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

防止 2 个宽度可变的浮动兄弟姐妹包裹在容器内？

Prevent 2 floated siblings with variable width from wrapping inside of container?

html

css

css-float