html - 如何使用此命令使 4 个 div 向左浮动，1 个向右浮动？

Question

我想让这 5 个 div 按以下顺序左右浮动:

1 4

2 4

3 4

5 4

仅当屏幕宽度大于 600px 且小于 1024px 时。div 4 具有所有其他 div 的高度，如果屏幕宽度小于 600px，我想将它们一个一个地显示在彼此下方，如下所示:

1

2

3

4

5

这是我的示例代码:

<div class=group>
  <div class="block one">Block One Left</div>
  <div class="block two">Block Two Left</div>
  <div class="block three">Block Three Left</div>
  <div class="block four">Block Four right</div>
  <div class="block five">Block Five Left</div>
</div>

还有我的CSS:

.group {
  width: 700px;
  margin: 0 auto;
}
.block {
  width: 200px;
  display: inline-block;
  background: #333;
  margin: 5px;
  text-align: center;
  color: white;
}
.one, .two, .three, .five {
  height: 30px;
}
.four {
  height: 160px;
}

还有一个代码笔来说明情况:

http://codepen.io/anon/pen/NberNM

关于如何使这项工作有任何想法吗？

Answer 1

如果你知道元素的宽度是多少，你总是可以绝对定位它(确保相对定位容器)。

http://codepen.io/anon/pen/rWoLgx

仅当设备宽度小于 600px 时才这样做:

@media screen and (max-width: 600px) { 
    .four {
      height: 160px;
      position: absolute;
      left: 220px;
      top: -5px;
    }
}

请注意，我还在 block 上使用了 flex 来对齐它们，但这可以使用显示 block 来完成。

http://codepen.io/anon/pen/XNoKLK