两个 div 不会嵌套在父 div 中答案

【问题标题】：Two divs will not nest inside parent div两个 div 不会嵌套在父 div 中
【发布时间】：2014-12-11 06:35:44
【问题描述】：

我在父 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%;
    }
}

【问题讨论】：

他们都在我的父母中。另外，这与您上一个问题stackoverflow.com/questions/27408344/… 有何不同？
两个box1 在#sell_section 内。有什么问题？
我对这个网站很陌生，所以由于我没有得到答案，我想我会改写它并缩短问题。
最好的建议总是正确地格式化你的代码。这样可以省去很多麻烦。

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

约翰尼的回答+1，而且标记有点不正常：

您的样式已将样式规则添加到 .hr_1 元素，而您似乎希望将它们添加到 #sell_section - 这是包装 div 的 id。

【讨论】：

【解决方案3】：

我有点难以理解您到底在追求什么。根据我的理解，您可能想做一些事情，例如将border 或background-color 添加到您的#sell_section DIV。并且在不同的尺寸下，样式并没有像您希望的那样被应用？如果是这样，那么罪魁祸首是因为您浮动您的子/嵌套 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。将其应用于包含浮动元素的元素，它将表现得好像这些元素没有浮动并占用空间。

【讨论】：

【解决方案4】：

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

【讨论】：