如何让较小的 div 堆叠在较大的 div 的右侧？

Question

我想在下面绘制的排列中布置一些 div。它是两个并排的方形块，然后是垂直排列的 2 个半高块，其中第三个大块可能适合。

+---------+ +---------+ +---------+ 
| BOX1    | | BOX2    | | BOX3    |
|         | |         | +---------+
|         | |         | +---------+
|         | |         | | BOX4    |
+---------+ +---------+ +---------+

到目前为止，我已经接近的唯一方法是创建 3 个左浮动框并将两个较小的框放在第三个浮动框中。这对我来说感觉不对。就像，我添加额外的 div 只是为了控制布局。也许那没问题，但感觉不对。

在这里看到它：

https://jsfiddle.net/a84kv4wo/1/

+---------+ +---------+ +---------+ 
| BOX1    | | BOX2    | | BOX3    |
|         | |         | +---------+
|         | |         | +---------+
|         | |         | | BOX4    |
+---------+ +---------+ +---------+

.big_box {
  height: 8em;
  width: 8em;
  border: 1px solid black;
  float: left;
}
.small_box {
  height: 4em;
  width: 8em;
  border: 1px solid black;
}

一方面，我可能想开始对大框应用更多样式以控制文本的布局方式，并且我不希望这些样式影响框 3 和 4。

看起来两个大块应该保持浮动，然后两个较小的盒子应该围绕它们，垂直堆叠，就像 div 倾向于做的那样。但这不会发生。我不知道答案是什么，但似乎你应该能够只布局 4 个 div，然后在 CSS 中按照你想要的方式排列它们。就像在这个小提琴中：

https://jsfiddle.net/agfbrz5x/

<div class="big_box">BOX1</div>
<div class="big_box">BOX2</div>
<div class="big_box">
  <div class="small_box">BOX3</div>
  <div class="small_box">BOX4</div>
</div>

.big_box {
  height: 8em;
  width: 8em;
  border: 1px solid black;
  float: left;
}
.small_box {
  height: 4em;
  width: 8em;
  border: 1px solid black;
  float: left;
}

那有我想我想要的 html，但我无法正确使用 css。

有任何想法吗？

Answer 1

将元素包装在 adiv中以实现某种布局确实没有错。

事实上， adiv是一个通用容器，用于对元素进行分组以用于样式目的等（参见MDN 定义）。

这是使用 CSS flexbox解决问题的一种方法。

#flex-container {
  display: flex;
}
#flex-container-nested {
  display: flex;
  flex-direction: column;
}
.big_box {
  height: 8em;
  width: 8em;
  border: 1px solid black;
}
.small_box {
  height: 4em;
  width: 8em;
  border: 1px solid black;
}
* { box-sizing: border-box; }

<div id="flex-container">
  <div class="big_box">BOX1</div>
  <div class="big_box">BOX2</div>
  <div id="flex-container-nested">
    <div class="small_box">BOX3</div>
    <div class="small_box">BOX4</div>
  </div>
</div>

js小提琴

弹性盒的好处：

1. 最少的代码；非常有效率
2. 垂直和水平居中，简单易行
3. 等高列简单易行
4. 用于对齐 flex 元素的多个选项
5. 它是响应式的
6. 与浮动和表格不同，它们提供有限的布局容量，因为它们从未用于构建布局，flexbox 是一种现代 (CSS3) 技术，具有广泛的选项。

浏览器支持：

所有主流浏览器都支持 Flexbox，但 IE < 10 除外。

一些最新的浏览器版本，例如 Safari 8 和 IE10，需要供应商前缀。

要快速添加前缀，请使用Autoprefixer。

此答案中的更多详细信息。