Question

我知道这将在其他地方得到解答，但我在css中发现了太多噪音，无法理解发生了什么。教程让我进入圈子 - 我认为简单的问题;如何在下面的代码中得到div class =＆＃39; mod＆＃39;被包含在div class =＆＃39; body＆＃39; ？当我尝试这样做时，白色div位于其预期父级之外和之下。容器应填充屏幕尺寸，侧边栏位于屏幕左侧，固定宽度x屏幕高度，以及主体div内的mod框。

<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

请使用以下风格。你错过了“浮动：左”。

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

Answer 2

为了将两个容器并排放置，您需要将它们浮起来。默认情况下，它们将始终堆叠在另一个之上。

我已经更改了一些代码，因为身高：100％因为内容不足而无法获得您想要的结果：

<style>
   .container {
    background-color:blue;
    min-height:150px;
}
.sidebar {
    width:300px;
    height:150px;
    background:red;
    float:left;}

.body{float:left;}
.mod { 
    height:100px; 
    width:100px; 
    background:white; 
    border:1px solid;
}
</style>

<div class="container">
<div class="sidebar">&nbsp;
</div>
<div class="body">
    <div class="mod"></div>
</div>

Answer 3

默认情况下，DIV元素显示为块。因此，即使您已将宽度指定为.sidebar div元素，它也会扩展到屏幕的其余部分。您应该在float:left和.sidebar类

上使用.body

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

或者应该为这两者添加display:inline-block。

.body
{
   display: inline-block;
}
.sidebar {
  width: 300px;
  height: 100%;
  background: red;
  display: inline-block;
}

这两个解决方案都将以两种不同的方式将.body元素包装在其父元素中。你需要为你选择最合适的款式。

Answer 4

请试一试。

CSS

.container {position：relative; }

.sidebar {position：absolute;}

的.mod {左：300像素; 位置是：绝对;}

Answer 5

要将两个div并排放置，请将以下css属性添加到父div＃

.container{
display:flex;
}

Answer 6

你没有为.body类提供宽度，因为你给了元素100％的高度而没有使用浮动，它会下降。我对你的小提琴代码做了一些小修改，将这个css粘贴在那里：

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

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

.mod { height:100px; width:100px; background:white; border:1px solid;}
</style>

Answer 7

mod div位于body div内，但body也围绕mod，因此您无法“看到”它。但是，body元素不位于侧边栏旁边。我建议您学习如何使用浏览器的检查工具来检查元素的实际位置，大小等等（互联网上有大量资源，所以我不会教你如何）。

div元素的默认行为是放在彼此之下，因为sidebar填充container，正文“溢出”并且看起来显示在container下面。< / p>

如果你想让div出现在行中，你必须将css代码display: inline-block添加到彼此相邻的兄弟div （在这种情况下为sidebar和{ {1}}）。这会将它们作为块放在一起。

As you can see in this fiddle，body div现在位于侧边栏旁边。如果你检查mod div，你会发现身体的长度与侧边栏的长度相同，body放在身体的左下角。

If you have a look at this fiddle我已将代码mod添加到float: left;并且它的兄弟body您现在将看到sidebar而不是调整为父级（包装边栏）现在只调整其内容body。

浮点数告诉兄弟div他们应该留在它左边的元素旁边，在这种情况下，它会破坏兄弟div下的默认位置，而是将它放在它旁边。

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

7 个答案:

要将两个div并排放置，请将以下css属性添加到父div＃