Question

我遇到浮动问题。我有两个div，我需要始终并排，在同一条线上。屏幕调整大小时，它们不应换行。一个必须向左浮动，另一个向右浮动。如果屏幕宽度太小而无法完全显示两个div，那么用户必须能够滚动主窗口以查看所有内容（滚动条应该是用户期望的位置，而不是＆＃34;内部＆＃34;滚动条）。如果两个浮动的div都不完全可见，我只希望滚动条可见 - 滚动条不应该是可见的。

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

我需要div来保持彼此在线。

重要说明：两个浮动div的内容宽度可变;我已经为演示sakes硬编码了一些尺寸，但这些尺寸并不总是他们的尺寸。无论内容如何，div都必须相互串联。

小提琴：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

只需从float: left和float: right移除.ads-container和.content-container，然后为overflow: auto;

设置.container

Answer 2

据我理解你的问题，即使窗口调整为min-width:到容器

，你也需要内联两个div

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

demo

<强>更新

New Demo

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

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

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

2 个答案: