Question

我正在写自己的CSS，但奇怪的是我的.content border-top和border-bottom在一起。

这是我的css代码：

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;
    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;
}

<!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 footer</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>

我想知道如何将红色边框底部移动到正确的位置。我试图在HTML中添加一个新的内容框，位置似乎没问题，但是混淆了输出。我是CSS新手，请帮帮我。

Answer 1

您的.content元素仅包含浮动元素，这些元素与其容器元素的边框和大小“不计算”。将.content添加到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; min-width: 1200px; border-top: 3px solid orange; border-bottom: 30px solid rgb(239, 98, 98); overflow: auto; } .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; }以使<!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>  <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 footer</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>包装其浮动内容：

(y >= (canvas.height)

Answer 2

为.content ID元素提供一些高度也是个好主意。

CSS Box边框底部贴在上面？

2 个答案: