1

我在其父 div 中有一个 div，代码如下所示

<div style="width:100%;height:400px;"><!--main_div-->
<div id="left_container" style="width:float:left;width:220px;height:1000px;"></div>
<div id="middler" style="float:left;width:800px;height:800px;background-color:#333;"></div>
</div><!--end_of_main_div-->

此代码在浏览器中完美地 HTML 化

但是当我调整浏览器的大小（更改浏览器窗口的宽度）时，div（中间人）被奇怪地推到了主 div 的下方。为什么会这样

即使重新调整浏览器的大小
http://www.youtube.com/watch?v=YcpwaeP11pY就像这个页面一样完美传播

4

5 回答 5

2

因为这：

   float:left;

它告诉浏览器的是：如果有足够的空间，请将它们放在同一行。如果没有，请放下一行。

您为其设置了像素宽度，因此在更改窗口大小时它总是会下降到下一行。

不要使用按像素设置的宽度，而是尝试使用百分比。

于 2013-06-25T14:10:43.747 回答
1

因为如果可以的话，float:left只会尝试拥抱相邻的 div。不能保证 div 将与第一个 div 的右侧对齐。只有在浏览器窗口中有足够的空间时才会这样做。

如果要将标题为“中间人”的 div 保留在其他 div 的右侧，则必须使用百分比或使用固定/绝对定位。

在我看来，这个问题本身并不太具体。

您在第 2 行的语法中也有错误：

这个：

width:float:left;

真的应该是这样的：

float:left;

但这可能无法解决您的问题。

于 2013-06-25T14:17:48.877 回答
0

尝试以百分比设置大小。就像有人已经说过的那样，如果将其设置为像素，则大小是静态的，并且如果浏览器没有空间来水平放置它们，它将尝试垂直放置它们。

于 2013-06-25T14:20:11.230 回答
0

因为如果浏览器宽度小于 1020 像素，则不再有足够的空间来并排放置两个框，所以其中一个必须放弃。

于 2013-06-25T14:10:34.383 回答
0

您可以为主 div 设置静态最小宽度：

<div style="width:100%; min-width: 1020px; height:400px;">

注意：当您向#left-container 或#middler 添加填充、边距或边框时，您应该将该数字添加到主 div 的最小宽度中。

于 2013-06-25T14:23:43.790 回答