Html 调整窗口大小时如何使浮动不移动

好的，我有一个标题、导航栏和内容框（图1）：

（单击“下一步/上一步”可查看两张图片）

我想要两个侧栏，一个在左边，有图片或其他东西，另一个在右边，有“关于我们”的主题

所以我添加了它们（图2）

不管怎样，现在，如果我调整浏览器窗口的大小，两个边栏会重叠页面上的内容；除了像我希望他们做的那样，保持不变，不匹配以适应页面的宽度

代码

CSS:

HTML:

//内容//

这很容易解决。你只需要把所有东西都装在一个容器里

如果希望侧栏始终保持原样，靠近内容，则为容器指定固定宽度。这将引入一个水平滚动条，但这比重叠要好

<div id="containAll">
<!-- All your other code here -->
</div>

#containAll {width:###px;}
/* OR */
#containAll {min-width:###px;}

如果希望侧边栏紧靠屏幕边缘，但不重叠，请使用最小宽度。这将使它们紧靠屏幕边缘，只要屏幕足够大，并且如果屏幕变小，则再次使用水平滚动条场景，这比重叠要好

<div id="containAll">
<!-- All your other code here -->
</div>

#containAll {width:###px;}
/* OR */
#containAll {min-width:###px;}

#包含所有{宽度：###px；}
/*或*/
#包含所有{最小宽度：###px；}

嗯，是的。这就解决了问题。但是，它可能与其他屏幕/浏览器尺寸存在兼容性问题；对吧？@user3400029不应该<所有主流浏览器都支持code>width和

minwidth

。不，例如：我的屏幕很大，大约2000 X 1600。好啊因此，在一台屏幕大小为1280 X 720的计算机上，这些元素可能遍布整个屏幕并弄乱了。@user3400029否，如果将它们包含在一个固定宽度的元素中，则不会。最糟糕的情况是出现一个垂直滚动条。

<div id="containAll">
<!-- All your other code here -->
</div>

#containAll {width:###px;}
/* OR */
#containAll {min-width:###px;}