html - 带边框的响应框

Question

我正在尝试制作这个带有边框线的精确框。你可以看到 H2 之后有新的边框线，然后是一段。请告诉我该怎么做？当我使用 border-bottom:1px solid 时，它只是形成一条线，但不触及主边框的边缘。在这里我附上图片以便您可以更好地理解这里您可以看到 image

我的代码

    <div class="col-sm-8 col-sm-offset-2" id="house">
            <h3 class="text">Our house packages include:</h3>

            <ul class="lead text" id="list">
            <li>Standard site costs (based on 500mm fall to site & ‘M’ Class slab)</li>
            <li>Rainwater Tank or connection to recycled water where available.</li>
            <li>Concrete driveway (up to 55sqm)</li>
            <li>Tiled Front Porch</li>
            <li> Internal Floor Coverings</li>
            <li> 5+ star gas instantaneous HWS</li>
            <li>Wall & Ceiling insulation</li>
            <li>‘Classic’ range of inclusions</li>
            </ul>
             <img src="images/landing.jpg" alt="landing Image">
<p class="note">NB. Please note that all packages are subject to developer and/or council and statutory authorities’ approvals.</p>
    </div>
    </div>

CSS

#house {
border: 1px solid black;
background:white;
}

#house h3 {
border-bottom:1px solid;
font-size:28px;
font-weight:bold;
margin:10px;
}

#list {
font-size:15px;
margin:15px;
padding:15px;
position:relative;
right:20px;
text-align:left;

}

#house img {
width:40%;
position:relative;
left:500px;
bottom:260px;
}

请告诉我如何在标题后和列表后制作边框线。请看一下图像。它应该是响应式的。

谢谢大家

Answer 1

我认为您的代码在顶部缺少一个 div 标记，因此我无法进行调试。 :/

但如果我必须做同样的事情，我会这样解决:

<style>

    html { 
        background: #EEE;
        width: 100%;
        height: 100%;
        border: 0;
        text-align: center;
        padding: 40px;
        box-sizing: border-box;
        color: #AAA;
        font-family: calibri;
    }

    .box{
        background: #FFF;
        border: 2px solid #DDD;
        width: 80%; /*SPECIFY WIDTH HERE*/
        display: inline-block;
    }

    .heading {
        border-bottom: 2px solid #DDD;
        width: 100%; 
        padding: 20px; 
        text-size: 30px;
        font-size: 30px;
        box-sizing: border-box;
        display: inline-block;
    }

    .content {
        border-bottom: 2px solid #DDD;
        width: 100%;
        padding: 20px; 
        box-sizing: border-box;
        display: inline-block;
    }

    .footer {
        width: 100%;
        padding: 20px; 
        box-sizing: border-box;
        display: inline-block;
    }

    .myList {
        display: inline-block;
        text-align: left;
        padding: 10px;
    }

    li {
        margin: 10px 0;
    }

    .myImg {
        display: inline-block;
        padding: 10px;
    }

    .houseImg {
        width: 300px;

    }

</style>

    <div class='box'>
        <div class='heading'>
        Our house packages include:
        </div>

        <div class='content'>
            <div class='myList'>
                 <ul class="lead text" id="list">
                    <li>Standard site costs (based on 500mm fall to site & 'M' Class slab)</li>
                    <li>Rainwater Tank or connection to recycled water where available.</li>
                    <li>Concrete driveway (up to 55sqm)</li>
                    <li>Tiled Front Porch</li>
                    <li> Internal Floor Coverings</li>
                    <li> 5+ star gas instantaneous HWS</li>
                    <li>Wall & Ceiling insulation</li>
                    <li>'Classic' range of inclusions</li>
                </ul>
            </div>
            <div class='myImg'>
                <img src='http://www.simplyeleganthomedesigns.com/hudson%20cottage%20FL.jpg' class='houseImg'>
            </div>
        </div>
        <div class='footer'>
            Some Footer text here
        </div>
    </div>