CSS中写三个浮动框排成3列，缩小浏览器时，最后一个被挤到下面去了如何解决？
我在一个固定了宽度的大框里面，放了3个小的固定宽度的浮动框，但是当我按住ctrl+鼠标滚动条缩小页面的时候，最后一个框被挤到下面去了。但看上去所有元素都是按比例缩小的呀，...
我在一个固定了宽度的大框里面，放了3个小的固定宽度 的浮动框，但是当我按住ctrl+鼠标滚动条缩小页面的时候，最后一个框被挤到下面去了。但看上去所有元素都是按比例缩小的呀，为什么最后一个会被挤到下面去呢？怎么解决？代码如下：
<style>
#box_mid{
width:983px;
margin:0 auto;
border:1px solid #666;
height:500px;
}
.left{
width:242px;
border:1px solid #666;
height:240px;
float:left;
}
.mid{
width:508px;
float:left;
border:1px solid #666;
height:240px;
}
.right{
width:220px;
float:left;
border:1px solid #666;
height:240px;
}
</style>
</head>
<body>
<div id="box_mid"><!--内容部分-->
<div class="left"><!--左边-->
</div>
<div class="mid"><!--中间-->
</div>
<div class="right"><!--右边-->
</div>
</div><!--内容部分结束-->
</body>
当然，可以用position:absolute解决，但是，给出来的代码为什么最后一个框会被挤到下面去呢？不用绝对定位能解决吗？ 展开
<style>
#box_mid{
width:983px;
margin:0 auto;
border:1px solid #666;
height:500px;
}
.left{
width:242px;
border:1px solid #666;
height:240px;
float:left;
}
.mid{
width:508px;
float:left;
border:1px solid #666;
height:240px;
}
.right{
width:220px;
float:left;
border:1px solid #666;
height:240px;
}
</style>
</head>
<body>
<div id="box_mid"><!--内容部分-->
<div class="left"><!--左边-->
</div>
<div class="mid"><!--中间-->
</div>
<div class="right"><!--右边-->
</div>
</div><!--内容部分结束-->
</body>
当然，可以用position:absolute解决，但是，给出来的代码为什么最后一个框会被挤到下面去呢？不用绝对定位能解决吗？ 展开
4个回答
展开全部
这是数学题啊，宽度按比例缩小，但是边框永远是1px，到达某一比例后，里边div的宽度加上边框宽度（6），就会超过外部div的宽度，右边的div就会被挤下去了
追问
果然是这样的，我把边框设置为0，就没有被挤下去了。看来我可以不用绝对定位了。加边框只是为了方便自己设计，到最后都是要去掉的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
算宽度应该把边框也算进去吧？你试试把left，mid，right这三个div的宽度都缩小5px试试
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
奇怪，我试了下你的代码，没问题啊。
记住要清理浮动
记住要清理浮动
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
那你用百分比设置宽度咯。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
