css+div布局，浏览器缩小之后右边的div下去了
我看到网上很多这样的例子，要么是浏览器放大之后布局乱了，要么是缩小之后布局乱了。解决方法也很多。我只是想问问，有没有大侠知道缩放浏览器造成布局乱的原因？我是新手，我不能理...
我看到网上很多这样的例子，要么是浏览器放大之后布局乱了，要么是缩小之后布局乱了。解决方法也很多。我只是想问问，有没有大侠知道缩放浏览器造成布局乱的原因？我是新手，我不能理解的是，浏览器缩放难道不是所有的元素，包括边距，border等一起缩放的吗？那为什么还会乱呢？
附上一个写好的布局；这个文件里面，外层的div宽度也指定了，内层的两个div宽度也指定了。内层的两个div宽度加上margin，border等合起来，也不会超过外层的宽度，为什么缩小浏览器之后还会变形（右边的跑下去）？我知道如果把右边的div宽度改为540px,就不会出现变形，但是解决方法不重要。主要的问题是，为什么会变形？？
求大侠解答！！！
<style type="text/css">
html,body{
padding:0px;
margin:0px;
text-align:center;
}
#top{
margin:10px auto;
border:#333 1px solid;
width:760px;
height:150px;
}
#main
{margin:10px auto;
width:760px;
height:auto;
border:#F00 1px solid;
}
#main #left{
border:#FF0 1px solid;
margin:1px;
float:left;
width:200px;
height:300px;
}
#main #right{
float:right;
border:#0F0 1px solid;
width:550px;
height:300px;
margin:1px;
}
#bottom
{margin:10px auto;
border:#333 1px solid;
width:760px;
height:150px;
}
.clear{border:0px;
clear:both;
visibility:hidden;
height:0px;
}
</style>
</head>
<body>
<div id="top">top部分</div>
<div id="main">
<div id="left">
左侧固定 左侧固定 左侧固定 左侧固定
</div>
<!--右侧变动内容（start）-->
<div id="right">
右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定
右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固
</div>
<!--右侧变动内容end）-->
<div class="clear"></div><!--去除浮动！-->
</div>
<div id="bottom"> bottom部分 </div>
</body> 展开
附上一个写好的布局；这个文件里面，外层的div宽度也指定了，内层的两个div宽度也指定了。内层的两个div宽度加上margin，border等合起来，也不会超过外层的宽度，为什么缩小浏览器之后还会变形（右边的跑下去）？我知道如果把右边的div宽度改为540px,就不会出现变形，但是解决方法不重要。主要的问题是，为什么会变形？？
求大侠解答！！！
<style type="text/css">
html,body{
padding:0px;
margin:0px;
text-align:center;
}
#top{
margin:10px auto;
border:#333 1px solid;
width:760px;
height:150px;
}
#main
{margin:10px auto;
width:760px;
height:auto;
border:#F00 1px solid;
}
#main #left{
border:#FF0 1px solid;
margin:1px;
float:left;
width:200px;
height:300px;
}
#main #right{
float:right;
border:#0F0 1px solid;
width:550px;
height:300px;
margin:1px;
}
#bottom
{margin:10px auto;
border:#333 1px solid;
width:760px;
height:150px;
}
.clear{border:0px;
clear:both;
visibility:hidden;
height:0px;
}
</style>
</head>
<body>
<div id="top">top部分</div>
<div id="main">
<div id="left">
左侧固定 左侧固定 左侧固定 左侧固定
</div>
<!--右侧变动内容（start）-->
<div id="right">
右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定
右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固
</div>
<!--右侧变动内容end）-->
<div class="clear"></div><!--去除浮动！-->
</div>
<div id="bottom"> bottom部分 </div>
</body> 展开
3个回答
展开全部
写这么多代码干嘛，你直接用一个大的div套住所有的小div，然后给大div设置一个宽度，那样的话 不管怎么改变浏览器的大小，大DIV里面的内容是不会跑下来的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
#main #left{
border:#FF0 1px solid;
margin:1px;
float:left;
width:200px;
height:300px;
}
#main #right{
float:right;
border:#0F0 1px solid;
width:550px;
height:300px;
margin:1px;
}
把这里的border去掉就不会出现任何放大或放小的排版问题。你可以尝试一下，很多网页排版问题很可能都是border的问题。
所有根据个人经验 和 猜测，问题出在border这里。不过具体是哪里，我又不记得有什么理论支持。
觉得border的宽度是有个最小值得，不会一直跟着变细。
border:#FF0 1px solid;
margin:1px;
float:left;
width:200px;
height:300px;
}
#main #right{
float:right;
border:#0F0 1px solid;
width:550px;
height:300px;
margin:1px;
}
把这里的border去掉就不会出现任何放大或放小的排版问题。你可以尝试一下，很多网页排版问题很可能都是border的问题。
所有根据个人经验 和 猜测，问题出在border这里。不过具体是哪里，我又不记得有什么理论支持。
觉得border的宽度是有个最小值得，不会一直跟着变细。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我的火狐和IE中测试是完全没有问题的 你用的浏览器对HTML的解析可能有问题
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
