Question

我有三列名为<div class="pageColumnOneThird">。

在每个栏目中，我使用PHP获取图片和帖子，其中最新项目放在top left column中，下一个放在top middle column中，第三个放在top right column之前再次回到left column。

现在我正在努力使这个响应，所以当显示两列时，每个图像/帖子的位置都会改变。

示例：当并排只有两列时，我需要第一行项目为元素1和2.然后第二行必须是元素3和4。 / p>

有没有办法用CSS做到这一点？

如果没有，是否有任何快速的jQuery代码可以为我做这个？

代码

<!-- FIRST COLUMN -->
<div class="pageColumnOneThird">
    <div class="itemWrap">Element 1</div>
    <div class="itemWrap">Element 4</div>
    <div class="itemWrap">Element 7</div>
</div>
<!-- SECOND COLUMN -->
<div class="pageColumnOneThird">
    <div class="itemWrap">Element 2</div>
    <div class="itemWrap">Element 5</div>
    <div class="itemWrap">Element 8</div>
</div>
<!-- THIRD COLUMN -->
<div class="pageColumnOneThird">
    <div class="itemWrap">Element 3</div>
    <div class="itemWrap">Element 6</div>
    <div class="itemWrap">Element 9</div>
</div>

还有一个jsfiddle。

Answer 1

你可以简单地使用一个包装器，然后只使用@media查询

.pageColumnOneThird {
  font-size: 0;
}
.itemWrap {
  background-color: #AEAEAE;
  margin: 2px 0;
  width: 33.3%;
  padding: 0 1px;
  height: auto;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-size: 16px
}
@media (max-width: 768px) {
  .itemWrap {
    width: 50%
  }
}
@media (max-width: 480px) {
  .itemWrap {
    width: 100%
  }
}

<div class="pageColumnOneThird">
  <div class="itemWrap">Element 1</div>
  <div class="itemWrap">Element 2</div>
  <div class="itemWrap">Element 3</div>
  <div class="itemWrap">Element 4</div>
  <div class="itemWrap">Element 5</div>
  <div class="itemWrap">Element 6</div>
  <div class="itemWrap">Element 7</div>
  <div class="itemWrap">Element 8</div>
  <div class="itemWrap">Element 9</div>
</div>

编辑基于OP评论：

这不是我想要的，因为我需要被允许不同每个项目元素的高度，但保持相等的边距而不添加元素中的空白空间。这就是为什么我需要使用三个单独的列。找到了我需要的图片https://prod-foundation-forum.s3.amazonaws.com/uploads/part/part_image/93067/illustration.jpg

对于这种类型的布局，最适合您的是masonry

响应的div列，其中列项在屏幕上移动时调整大小

1 个答案: