Css 减小windows屏幕大小时浮动div

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

---

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

您需要使用容器

例子 html

---

请参阅live:

您需要使用容器

例子 html

---

请参阅live:

使用父div并固定子div的大小：

使用父div并固定子div的大小：

我尝试了您的示例，但在缩小浏览器窗口屏幕时，蓝色div仍然保持正确的大小。蓝色div不会移动到粉色div的下一个。根据我的经验，HTML容器本身实际上会实现这一点。除非div与非浮动元素冲突或正在塌陷，否则我不知道是什么导致它们不以这种方式运行。我尝试了您的示例，但在缩小浏览器窗口屏幕时，蓝色div仍然保持正确的大小。蓝色div不会移动到粉色div的下一个。根据我的经验，HTML容器本身实际上会实现这一点。除非div与非浮动元素冲突或正在崩溃，否则我不知道是什么导致它们不以这种方式运行。您可能需要提供实际的源代码供我们评估。据我所知，您所描述的是浮动元素的默认行为，必须被其他东西抵消。左div和右div的宽度是多少？当您减少浏览器宽度时，它们应该保持不变，还是应该适应可用空间？您可能需要提供实际的源代码供我们评估。据我所知，您所描述的是浮动元素的默认行为，必须被其他东西抵消。左div和右div的宽度是多少？减少浏览器宽度时，它们应该保持不变，还是适应可用空间？

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

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

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

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