Question

我的父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（middler）被奇怪地推到了主div之下..为什么会发生呢？

就像浏览器重新调整大小一样，这个页面也很完美 http://www.youtube.com/watch?v=YcpwaeP11pY

Answer 1

因此：

   float:left;

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

你给它设置像素宽度，所以当改变窗口大小时它总是会下降到下一行。

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

Answer 2

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

如果你想把div中名为'middler'的div保留在你的另一个div的右边，你必须使用百分比或使用固定/绝对定位。

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

第2行的语法也有错误：

此：

width:float:left;

应该是这样的：

float:left;

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

Answer 3

因为如果浏览器宽度小于1020px，则没有足够的空间来并排放置两个盒子，因此其中一个必须给予。

Answer 4

尝试以百分比设置大小。就像有人已经说过的那样，如果你把它设置为像素，那么尺寸就是静态的，如果浏览器没有空间可以横向放置，那么它会尝试垂直安装它们。

Answer 5

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

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

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

如何在CSS中使div静态

5 个答案: