是否有唯一的 CSS 方法来同步 2 个单独 div 中的元素顺序？

Question

在目录站点中

D、E、F 是在 B 网格中获取的帖子类型条目 (Wordpress)，它们按点赞数排序，因此它们的顺序可能会发生变化。

G、H、I 是 C 列中的广告，理想情况下它们应该水平“锚定”到帖子条目，以实现非常相关的广告。

这意味着如果网格中帖子条目的顺序从上到下更改为 FDE，则其列中广告的顺序应相应更改为 IGH，从上到下。

是否有任何纯 CSS 方法来实现这一点，或者 Javascript 修复方法是什么？

我还被告知将广告和帖子条目保留在同一列中，但这会减少样式可能性（和整体可能性），因此我更愿意将它们保留在 2 个单独的列中。

我确实可以根据需要为单个广告和帖子条目添加自定义选择器。

谢谢！

更新： 附加细节 - 两列中的元素数量随着新元素的添加而增加。

Answer 1

如果我在某一列中理解正确，那么当您撰写新文章时，您会看到最近的帖子/博客文章更新列表。您希望右侧的添加始终直接位于其相关文章的对面。这不能用纯 CSS 来完成，因为 CSS 无法进行这些调用。

如果您可以访问 HTML，则可以将 D & G 放在自己的 div 中。 E & H 在他们自己的 div 中。而不是让他们与其他项目共享一列。但是你必须确保当你添加一篇新文章时，事情会正确更新。这可能需要一些 Jquery。

Answer 2

我认为，您正在使用 PHP 获得这些评级。虽然我认为，这种排序最好在后端使用 PHP。但如果您正在寻找更像 CSS 的解决方案 - 请查看：

这部分你需要从你的 PHP 模板文件中获取。这是原始的构造，会在看到您的代码时为您编写更多内容。这里我们使用CSS variables。

<style>
  :root {
    <?php $x = 1;
    foreach($latest_posts as $post) { ?>
    --x<?php echo $x; ?>: <?php echo $post['like_count']; ?>;
    <?php $x += 1; } ?> 
  }
</style>

以及仅使用 CSS 在单独块中排序的代码。

:root {
  --x1: 3;
  --x2: 2;
  --x3: 55;
}

.b, .c {
  display: inline-flex;
  /* this will helps us to order elements bakcwords, so the one with the highest number will be on the top */
  flex-direction: column-reverse; 
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-content: stretch;
  align-items: flex-start;
}

.d, .g {
  order: var(--x1);
  background: yellow;
}

.e, .h {
  order: var(--x2);
  background: cyan;
}

.f, .i {
  order: var(--x3);
  background: green;
}

<div class="a">
  <div class="b">
    <div class="d">d</div>
    <div class="e">e</div>
    <div class="f">f</div>
  </div>
  <div class="c">
    <div class="g">g</div>
    <div class="h">h</div>
    <div class="i">i</div>
  </div>
</div>

---

更新

任何数量的帖子帖子。

<style>
.flex-block {
  display: inline-flex;
  /* this will helps us to order elements bakcwords, so the one with the highest number will be on the top */
  flex-direction: column-reverse; 
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-content: stretch;
  align-items: flex-start;
}

<?php $x = 1;
foreach($latest_posts as $post) { ?>
.flex-block > div:nth-child(<?php echo $x; ?>) {order: <?php echo $post['like_count']; ?>;}
<?php $x += 1; } ?> 

</style>

<div class="flex-block left-one">
  <div>left 1</div>
  <div>left 2</div>
  <div>left 3</div>
</div>
<div class="flex-block right-one">
  <div>right 1</div>
  <div>right 2</div>
  <div>right 3</div>
</div>