CSS盒子的顶部和底部黏在一起？
如图，content的顶部和底部黏在一起了，用了新的只带文字的div就可以了，但是也导致了错位？
红色为底部border，橙色为顶部border.
以下是代码：
body{
width: 100%;
margin: auto;
}
header{
position: relative;
margin: 20px;
min-width: 1200px;
min-height: 70px;
}
p{
font-family: courier;
font-size: 130%;
margin: 10%;
}
.content{
margin-top: 100px;
margin-bottom: 100px;
min-width: 1200px;
border-top: 3px solid orange;
border-bottom: 30px solid rgb(239, 98, 98);
}
.content .col-left{
width: 20%;
float: left;
}
.content .col-mid{
width: 60%;
float: left;
}
.content .col-right{
width: 20%;
float: left;
}
.footer{
margin-top: 20px;
} HTML的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>IEEI</title>
<!-- Custom styles for this template -->
<link href="css/reset.css" rel="stylesheet">
<link href="css/customized.css" rel="stylesheet">
</head>
<body>
<header>
<img src="http://via.placeholder.com/150x150">
</header>
<div class="content">
<div class="col-left"><img src="http://via.placeholder.com/100x150" style="width:100%"></div>
<div class="col-mid">
<p>
Instead of referencing the image directly, stick it within a DIV.
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
</p>
</div>
<div class="col-right"><img src="http://via.placeholder.com/100x150" style="width:100%"></div>
</div>
<div class="content">
<p>test content</p>
</div>
<div class="footer">
<p>test footer</p>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论