Question

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

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

到目前为止，我接近的唯一方法是创建3个左浮动框并将两个较小的框放在第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＆amp; 4。

似乎两个大块应该悬空，然后两个较小的盒子应该环绕它们，垂直堆叠，因为div倾向于。但这不会发生。我不知道答案是什么，但似乎你应该只能布局4个div然后在CSS中按照你想要的方式排列它们。喜欢这个小提琴：

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

在myNewList = [] for val in myList: for key, value in myDict.iteritems(): if val == value: myNewList.append(key)中包装元素以实现某种布局确实没有错。

实际上，div是一个通用容器，用于将元素分组以用于样式目的（参见MDN definition）。

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

＆＃13;

div

＆＃13;

#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; }

＆＃13;

jsFiddle

flexbox的好处：

最小代码;效率很高
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
它的响应
与花车和桌子不同，浮动和桌面提供有限的布局容量，因为它们从未用于建筑布局，因此flexbox是一种现代（CSS3）技术，具有广泛的选项。

浏览器支持：

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

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

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

this answer中的更多详情。

Answer 2

您可以使用弹性框获得此功能，而无需额外的包装。但是你需要为容器设置一些高度，比大盒子大一些，小于两个大盒子的总和。

.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的右侧？

2 个答案:

jsFiddle