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

Question

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

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

到目前为止，我唯一接近的方法是创建 3 个左浮动框并将两个较小的框放在第三个浮动框中。我觉得这不对。比如，我添加额外的 div 只是为了控制布局。也许这还可以，但感觉不对。

在此处查看：

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

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

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

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

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

https://jsfiddle.net/agfbrz5x/

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

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

那有 html 我想我想要的，但我做不到 css 对。

有什么想法吗？

Answer 1

为了实现某种布局，将元素包裹在 div 中确实没有错。

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

这是使用 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>

jsFiddle

flexbox 的好处：

最少的代码；非常高效
centering, both vertically and horizontally, is simple and easy
响应迅速
与浮动和表格不同，它们提供有限的布局容量，因为它们从未用于构建布局，而 flexbox 是一种具有广泛选项的现代 (CSS3) 技术。

浏览器支持：

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

一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 vendor prefixes。

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

中有更多详细信息。

Answer 2

您可以使用 flex box 获得它，而无需额外的包装器。但是你需要给容器设置一些高度，大于大盒子，小于两个大盒子的总和。

.container {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 10em;
}

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

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

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

How to get smaller divs to stack to the right of larger divs?

html

css

css-float

flexbox

jsFiddle