Question

我在父div中有两个div，但是当我检查页面时，两个div不在容器中，即使我已将div包裹在其他2个div之外。

我想为父div添加特征，而不是单独添加每个div。

么？

<!DOCTYPE html>
    <head>
    <title>Lavu Explore</title>
        <link rel="stylesheet" type="text/css" href="styles_sample.css">
    </head> 
    <body>
        <div id="sell_section">
            <h2>Sell, Manage, & Market in one easy system</h2>
            <hr class="hr_1">
            <div class="box1">
                <img id ="terminal_img" src="http://i.imgur.com/D5T6lY1.png">
            </div>
            <div class="box1">
                <p style="text-align:left">Choosing a new Point of Sale (POS) is an opportunity. Lavu   is not just accepting payments - Lavu is business management on the iPad. Upgrade your business with the Cloud POS system that was developed specifically for the restaurant / hospitality industry. Lavu has the tools you need to improve efficiency and the bottom line. Love your business.</p>
            </div>

        </div>
     </body>
</html>

styles_sample.css

html {
    box-sizing: border-box;
}


*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: auto;
    position: relative;
    overflow: auto;
    padding: 0 5%;
    max-width: 990px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

h2 {
    text-align: center;
    font-family: DIN;
    font-size: 40px;
    color: #8b8b8b;
    text-align: center;
    width: 100%;
    font-weight: normal;
}

p {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #8b8b8b;
    font-size: 16px;
    line-height: 150%;
} 

.hr_1 {
    position: relative;
    padding: 0;
    margin: 2% auto;
    height: 0;
    width: 400px;
    max-height: 0;
    font-size: 1px;
    line-height: 0;
    clear: both;
    border: none;
    border-top: 1px solid #aecd37;
    border-bottom: 1px solid #aecd37;
}

.box1 {
    width: 50%;
    min-width: 50%;
    position: relative;
    min-height: 1px;
}

@media (min-width: 830px) {
    .box1 {
        float: left;
    }
}

@media (max-width: 830px) {
    .box1 {
        width: 100%;
    }
}

Answer 1

你没有在你的doctype之后插入html开始标记，它应该看起来有点像这样

<!doctype html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>

Answer 2

我很难理解你所追求的是什么。根据我的理解，您可能需要为border DIV添加background-color或#sell_section。并且在不同尺寸下，样式没有像您希望的那样应用？如果是这样，那么罪魁祸首是因为你浮动你的孩子/嵌套DIV。 Floating起初可能有点难以理解。这绝对是需要一些实践和知识才能完全理解的概念之一。

这里没有你漂浮的东西会发生什么：

当一个元素浮动时，它会从正常的流动中取出文档。

这是什么意思？如果你有这个结构：

<div class="outer">
     <div class="inner">inner</div>
     <div class="inner">inner</div>
</div>

和以下CSS：

.outer {
     background-color: red;
}
.inner {
     float: left;
     width: 50%;
}

.outer的背景颜色不可见，因为子DIV是浮动的，并且不占用其父DIV中的任何空间。虽然父DIV中的其他元素（浮动或不浮动）与它们相同。

解决方案？最受欢迎的是clearfix。将它应用于包含浮动元素的元素，它的行为就像这些元素没有浮动并占用空间一样。

Answer 3

我找到了问题的答案！我没有意识到浮动元素不占用div中的空间。所以为了纠正它，我添加了overflow：auto到我的容器。这完全解决了这个问题。现在我可以为我的div添加边框和背景，而不用担心为什么它们不会拉伸整个容器的长度。

两个div不会嵌套在父div中

3 个答案: