【问题标题】：float the div when reducing the windows screen size减小 Windows 屏幕尺寸时浮动 div
【发布时间】：2012-03-29 18:41:08
【问题描述】：

在减小 Windows 屏幕尺寸时，我遇到了浮动 div 的问题。我想要实现的是我有两个并排的 div，两个 div 都向左浮动。当我减小浏览器窗口的屏幕尺寸时，右 div 将移动到左 div 的底部。请看下面的截图：

首先，两个 div 并排显示。缩小浏览器窗口大小后，右div内容会移动到左div的底部。

【问题讨论】：

您可能需要提供实际的源代码供我们评估。据我所知，您所描述的是浮动元素的默认行为，并且必须被其他东西抵消。
左右div的宽度是多少？当您减小浏览器宽度时，它们应该保持不变，还是应该适应可用空间？

标签： css html

【解决方案1】：

使用父级 div，并固定子级的大小：http://jsfiddle.net/zV9ea/

【讨论】：

【解决方案2】：

您需要使用容器。

示例

html

<div id="container">
  <div class="left"> Hello </div>
  <div class="right"> World </div>
</div>

css

#container {
  width: 100%;
  margin: 0 auto;
}

#container .left {
  width: 200px;
  background-color: pink;
  float: left;
}

#container .right {
  width: 760px;
  background-color: blue;
  float: left;
}

观看直播：http://jsfiddle.net/s8wfx/

【讨论】：

我尝试了您的示例，但是当我缩小浏览器窗口屏幕时，蓝色 div 仍然保持正确的大小。蓝色 div 不会移动到粉红色 div 的下一个。
根据我的经验，HTML 容器本身实际上会实现这一点。除非 div 与非浮动元素发生冲突或崩溃，否则我不知道是什么导致它们不以这种方式表现。