html - 将div放在包含多个div的包装器下面

这可能很容易。下面是我要创建的结构：



但是我总是以以下两种情况结束：



或这个：



这是我的代码：

的HTML

.newdiv2,
.newdiv3,
.newdiv4,
.newdiv5 {
  width: 25px;
  height: 25px;
  margin-bottom: 5px;
  border: 3px solid black;
}
.newdiv6 {
  width: 150;
  height: 150;
  border: 3px solid black;
}
.newdiv {
  height: 250px;
  width: 450px;
  float: left;
  border: 3px solid black;
}
.divwrapper {
  float: left;
  border: 3px solid blue;
}
.mainwrapper {
  display: block;
}

<div class="mainwrapper">
  <div class="newdiv"></div>
  <div class="divwrapper">
    <div class="newdiv2"></div>
    <div class="newdiv3"></div>
    <div class="newdiv4"></div>
    <div class="newdiv5"></div>
  </div>
</div>
<div class="newdiv6"></div>

看起来像上面的第二张图片（在我的Chrome浏览器中）。

最佳答案

您还可以重置主容器的block formating context，这样它就可以在浮动元素的内部和外部进行操作。

这里最简单的是添加：overflow:hidden;，因为不涉及大小

.newdiv2,
.newdiv3,
.newdiv4,
.newdiv5 {
  width: 25px;
  height: 25px;
  margin-bottom: 5px;
  border: 3px solid black;
}
.newdiv6 {
  width: 150px;
  height: 150px;
  border: 3px solid black;
}
.newdiv {
  height: 250px;
  width: 450px;
  float: left;
  border: 3px solid black;
}
.divwrapper {
  float: left;
  border: 3px solid blue;
}
.mainwrapper {
  display: block;
  /* reset bfc */
  overflow:hidden;
}

<div class="mainwrapper">
  <div class="newdiv"></div>
  <div class="divwrapper">
    <div class="newdiv2"></div>
    <div class="newdiv3"></div>
    <div class="newdiv4"></div>
    <div class="newdiv5"></div>
  </div>
</div>
<div class="newdiv6"></div>

关于html - 将div放在包含多个div的包装器下面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37767781/