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>
阅读 2.6k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题