本文探讨了当两个DIV设置为50%宽度时出现换行的原因，并提供了两种解决方案：移除边框或调整右边距以实现并排显示。
当你设置两个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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
