为什么，在一个div中，有加入俩个div，把他们向左排列后float:left;
后，在第二个加入的div左边设置了一下边框;
border-left:solid #ccc;
border-width:0 1px 0 1px;
就又上下排列了
代码：#div1,#div2{
float:left;
}#div1{
width:770px;
height:1000px;
}
#div2{
border-left:solid #ccc;
border-width:0 1px 0 1px;
width:250px;
height:1000px;
}
第1个回答 推荐于2016-03-14
1. 帮你简化了一下代码，建议如下写法；
2. div1和div2的父容器div0的宽度，要等于两个div宽度 + 边框 + 边距的总各，就不会出现到下一排的效果了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>border-style</title>
<style type="text/css">
<!--
#div0{width:1031px;}
#div1, #div2{float:left;height:1000px;}
#div1{width:770px;}
#div2{border-left:1px solid #ccc;width:250px;}
-->
</style>
</head>
<body>
<div id="div0">
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>
试一下吧！本回答被提问者采纳
2. div1和div2的父容器div0的宽度，要等于两个div宽度 + 边框 + 边距的总各，就不会出现到下一排的效果了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>border-style</title>
<style type="text/css">
<!--
#div0{width:1031px;}
#div1, #div2{float:left;height:1000px;}
#div1{width:770px;}
#div2{border-left:1px solid #ccc;width:250px;}
-->
</style>
</head>
<body>
<div id="div0">
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>
试一下吧！本回答被提问者采纳
第2个回答 2011-11-26
你这两个div的父框宽度是多少？如果这两个子框的宽度大于父框，就会上下排了~还有ie和其他内核浏览器对框模型的解释是不一样的。
第3个回答 2011-11-29
边框算外边框，
如果#DIV1 #DIV2的父DIV宽度大于等于770+1+1+250的话还是会正常排列的，（+1+1是算左右边框）
或者你把div2的宽度改成248px也可以
如果#DIV1 #DIV2的父DIV宽度大于等于770+1+1+250的话还是会正常排列的，（+1+1是算左右边框）
或者你把div2的宽度改成248px也可以
相似回答
