当你设置两个div长度为50%时会出现下面的情况!这是因为w3c盒子模型中的长度是包括border的长度的,所以当你设置了border为1px就超过了body的宽度所以就出现了换行的情况!
解决方法有两种:
1.去掉border,效果如下
2.如果需要加上边框加以区分两个部分的话可以给右边的div设个margin-right:-4px;(具体数字根据自己设定的border宽度而定)
源代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.first {
width: 50%;
float:left;
height: 100px;
border: 1px solid #3B6273;
}
.second {
width: 50%;
float:left;
height: 100px;
border: 1px solid #3B6273;
}
</style>
</head>
<body>
<div class="first"> </div>
<div class="second"> </div>
</body>
</html>