Question

在这个jsfiddle中你会看到第二个块下面有第三个块的空间。是否可以将第三个块推到第二个块下面，以便只有两行？

.list {
  display: flex;
  flex-flow: row wrap;
  width: 20rem;
}

.item {
  height: 5rem;
  width: 5rem;
  background-color: blue;
  margin: .2rem;
}

.item:nth-child(1) {
  height: 10rem;
  width: 10rem;
}

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 1

如果你向左移动.item，他们会以这种方式堆叠。

＆＃13;

.list {
  width: 20rem;
}

.item {
  height: 5rem;
  width: 5rem;
  background-color: blue;
  margin: .2rem;
  float: left;
}

.item:nth-child(1) {
  height: 10rem;
  width: 10rem;
}

＆＃13;

<div class="list">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

＆＃13;

Answer 2

在这些元素之间有这样的边距，解决方案可能是：

.list {
  width: 20rem;
}

.item {
  height: 5rem;
  width: 5rem;
  background-color: blue;
  margin: .2rem;
  float: left;
}

.item:nth-child(1) {
  height: 10rem;
  width: 10rem;
}

Answer 3

你需要使用flexbox。我相信还有其他方法，但如果您有兴趣，这里有一个关于flexbox的惊人的啧啧： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如果CSS有足够的空间，可以将两个元素推到同一行上吗？

3 个答案: