html - 无法在另一个 div 中成功嵌套 div

Question

我知道这个问题会在其他地方得到解答，但我发现 CSS 中的噪音太多，无法理解发生了什么。教程让我绕圈子——我认为是简单的问题；如何在下面的代码中将 div class='mod' 包含在 div class='body' 中？当我尝试这样做时，白色 div 位于其预期父项的外部和下方。容器应填满屏幕尺寸，侧边栏位于屏幕左侧，固定宽度 x 屏幕高度，mod 框位于 body div 内。

<style>
.container {
    width:100%;
    height:100%;
    background:blue;

}

.sidebar {
    width:300px;
    height:100%;
    background:red;
}

.mod { 
    height:100px; 
    width:100px; 
    background:white; 
    border:1px solid;

}
</style>
<div class="container">
    <div class="sidebar">
    </div>
    <div class="body">
        <div class="mod"></div>
    </div>
</div>

Answer 1

请使用以下样式。您缺少“ float :左”。

<style>
.container {
    width:100%;
    height:100%;
    background:blue;

}

.sidebar {
    width:300px;
    height:100%;
    background:red;
    float:left;
}

.body{
    float:left;
}

.mod { 
    height:100px; 
    width:100px; 
    background:white; 
    border:1px solid;

}

</style>