如何解决调整窗口大小会导致浮动Div疯狂
| 我正在尝试创建一个纯粹的基于HTML和CSS的布局，该布局在左侧显示页面的主要内容（扩展到页面的整个宽度，减去框），在右侧显示一个较小的框，例如用于导航或某种信息。这是导致问题的代码示例，其中描述了问题：<!DOCTYPE HTML>
<html lang=\"en\" dir=\"ltr\">
<head>
<title>Floating Div Madness upon Window Resize</title>
<style>
* {margin:0; padding:0}
body {margin:20px; font-size:0px; color:#000000}
div.page {margin-right:120px; background-color:#AAAAFF; float:left}
div.wide {width:300px; background-color:#AAFFAA}
div.box {width:100px; margin-left:-100px; background-color:#FFAAAA; float:left}
h1 {font-size:x-large}
p {padding-bottom:5px; font-size:small}
</style>
</head>
<body>
<div class=\"page\">
<h1>MAIN PAGE</h1>
<p>This is the main portion of the page (light blue). It is currently floated left with a right margin of 120px,to account for the box (light red) as well as the white space between it and the box (light red). All may look well on the surface,but...</p>
<p>Resize the window in Firefox (I tested both 3.5 and 4) and the white margin of the body can be cut off,not only on the right side,but on the bottom of the page,too.</p>
<p>Remove enough text and this div will shrink to fit it,no longer taking up the entire width of the page (minus the box).</p>
<div class=\"wide\">
<p>If I nest another,non-floating div with a fixed width (light green),something even stranger happens when I resize the window,this time in Internet Explorer 6 (maybe in other versions,too): The text in the page div (light blue) is squished,I think by the margin of the box (light red). The fixed width div (light green) is unaffected by this.</p>
</div>
</div>
<div class=\"box\">
<h1>BOX</h1>
<p>(this could be navigation,or anything else)</p>
</div>
</body>
</html>
解决方法
亲爱的先生，祝您有美好的一天，您似乎在构建布局时遇到麻烦。
据我了解，您需要2列的布局。左列自动扩展到w / e的宽度，以w / e减去右列宽度减去20像素为空白。右列是固定宽度，将包含菜单或各种html结构...
在左侧列中，您将看到文本，其中包括固定宽度框，此列中的固定宽度框应始终留在其中。这意味着我们希望最小宽度为固定宽度的框宽度+ 20 px的边距+右列的宽度。
我通过使容器围绕所有内容，对其应用最小宽度并制作一个虚拟容器来解决IE6中的最小宽度问题来做到这一点。
这是一个看起来像这样的工作示例：http://jsfiddle.net/uXyPu/
我没有运行IE6或firefox 3.5的版本来对其进行测试，但我相当有信心这会起作用。
附带说明一下，您在body标签上使用了边距，请不要这样做。作为基本规则，请保持身体完全扩张，最多应使用填充物。除此之外，避免边距是防止IE6大量问题的好方法，同时仍使布局与现代浏览器兼容。而且不要在浮动元素上完全使用填充/边距...
在对您的问题的第一条评论中，这位先生是完全避免使用ie6的，我希望您能要求大佬做这个项目，以便公司实际上可以开始考虑他们滥用ie6了。
, 我将您的右侧框移到了其余代码的上方，将其右移，然后为主页提供了一定百分比的宽度。
编辑：
也许这更好。我绝对将侧边框放置在顶部：20px；右：20px；并在首页上设置了右边距：120px，因此它不会在div下方。
尝试新的代码：
<!DOCTYPE HTML>
<html lang=\"en\" dir=\"ltr\">
<head>
<title>Floating Div Madness upon Window Resize</title>
<style>
* {margin:0; padding:0}
body {
margin:20px;
font-size:0px;
color:#000000; }
div.page {
background-color:#AAAAFF;
margin-right: 120px; }
div.wide {
width: 300px;
background-color:#AAFFAA; }
div.box {
position: absolute;
top: 20px;
right: 20px;
width:100px;
background-color: #FFAAAA; }
h1 {font-size:x-large}
p {
padding-bottom:5px;
font-size:small }
</style>
</head>
<body>
<div class=\"page\">
<h1>MAIN PAGE</h1>
<p>Resize the window in Firefox (I tested both 3.5 and 4) and the white margin of the body can be cut off,not only on the right side,but on the bottom of the page,too.</p>
<p>Remove enough text and this div will shrink to fit it,no longer taking up the entire width of the page (minus the box).</p>
<div class=\"wide\">
<p>If I nest another,non-floating div with a fixed width (light green),something even stranger happens when I resize the window,this time in Internet Explorer 6 (maybe in other versions,too): The text in the page div (light blue) is squished,I think by the margin of the box (light red). The fixed width div (light green) is unaffected by this.</p>
</div>
</div>
<div class=\"box\">
<h1>BOX</h1>
<p>(this could be navigation,or anything else)</p>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table width=\"100%\">
<tr>
<td valign=\"top\">
page content
</td>
<td width=\"100\" valign=\"top\">
<div class=\"box\">
menu content
</div>
</td>
</tr>
</table>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。