容器内的css 2列布局

Question

我正在尝试实现布局，在桌面屏幕大小上我们有 2 列，在移动设备/平板电脑上有 1 列

是否可以制作此代码：

<div class="posts-2-col">
    <div class="post">Post 1</div>
    <div class="post">Post 2</div>
    <div class="post">Post 3</div>
    <div class="post">Post 4</div>
    <div class="post">Post 5</div>
    <div class="post">Post 6</div>
</div>

像这样渲染：

（知道每个帖子的高度可以不同）

Answer 1

我只是把固定高度放在更高的帖子上

Jsfiddle

*{
  box-sizing: border-box;
}

.posts-2-col{
  width: 300px;
  margin: 0 -10px;
}

.posts-2-col .post{
  border: 1px solid red;
  width: 135px;
  margin: 0 5px;
  margin-bottom: 10px;
  float: left;
}

<div class="posts-2-col">
    <div class="post">Post 1</div>
    <div class="post">Post 2</div>
    <div class="post" style="height: 50px">Post 3</div>
    <div class="post">Post 4</div>
    <div class="post">Post 5</div>
    <div class="post">Post 6</div>
    <div class="post">Post 7</div>
</div>