响应式 div 列，其中列项目在屏幕调整大小时移动答案

【问题标题】：Responsive div columns where column items get shifted on screen resize响应式 div 列，其中列项目在屏幕调整大小时移动
【发布时间】：2016-05-28 21:00:09
【问题描述】：

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

在每一列中，我使用 PHP 获取图像和帖子，其中最新的项目放在 top left column 中，下一个放在 top middle column 中，第三个放在 top right column 中，然后返回到 @987654327再次@。

现在我正在尝试使其具有响应性，这样当显示两列时，每个图像/帖子的位置都会发生变化。

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

有没有办法使用 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。

【问题讨论】：

你能做一个 JSFiddle 吗？
所以你只想使用媒体查询？ developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…。我不明白你想做什么。
你想达到什么目的？
@Martin 是的，我正在使用媒体查询来更改每列的宽度。但是，我需要项目元素保持有序，即使只有 2 列并排，或者只有 1 列。当您在 jsfiddle 中调整窗口大小时，您可以看到 2 item 元素位于第一列中的第 7 个之后。我需要他们保持秩序。
为什么要把它们分成几列？您可以在 inline-block 模式下制作类似 30% 宽度的 itemWrap div，这样它们就可以在单个公共父 div 中按顺序流动。在较窄的屏幕上，您只需将它们的宽度更改为 50% 左右，它们就会保持所需的顺序，现在为 2 列。

标签： jquery html css grid responsive

【解决方案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

【讨论】：

这不是我想要的，因为我需要在每个项目元素上允许不同的高度，但保持相等的边距而不在元素中添加空白空间。这就是为什么我需要使用三个单独的列。找到我需要的图片prod-foundation-forum.s3.amazonaws.com/uploads/part/part_image/…
不错！正是我想要的。谢谢你。你知道叫什么类型的网格吗？