网页如何实现平均分成左右两部分

最新推荐文章于 2024-06-13 17:29:52 发布

SteveHerb

最新推荐文章于 2024-06-13 17:29:52 发布

阅读量3.5w

点赞数 8

文章标签：平均分两部分 float margin

本文链接：https://blog.csdn.net/asiangames/article/details/29846833

版权

当你设置两个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>