Is there an only CSS way to synchronize the order of elements in 2 separate divs?

user_13052479 0
Viewed 71

enter image description here

In a directory site

D, E, F are post type entries (Wordpress) fetched in the B grid, and they are odered by their like counts, so their order is subject to change.

G, H, I are ads in column C, and they ideally should be horizontally "anchored" to the post entries, to achieve very related ads.

Meaning that if the order of the post entries in the grid changes to FDE top to bottom, then the order of the ads in their column should change accordingly to IGH, top to bottom.

Is there any pure CSS way to achieve this, or what would be the Javascript fix?

I was also told to keep the ads and the post entries in the same column, but that reduces styling possibilities (and overall possibilities), so I would prefer to keep them in 2 separate columns.

I do have the possibility to add custom selectors to both the individual ads and post entries, on demand.

Thanks!

Update: additional detail - the number of the elements in both columns is increasing with new elements added.

flexbox css-grid css javascript
2 Answers

If I understand correctly in one column you have a list of recent posts/blog articles updates when a new article is written. You want the adds on the right to always be directly across from their related article. This can not be accomplished with pure CSS as CSS can't make those calls.

If you have access to the HTML you could but D & G in their own div. E & H in their own div. Instead of having them share a column with the other items. But you would have to make sure that when you add a new article that things update correctly. That may call for some Jquery.

user_138000430

I think, you are receiving those ratings using PHP. Although I think, this kind of sorting better to do using PHP on beck-end. But if you are looking for more like CSS solution - please take a look:

This part you need to get from your PHP in your template file. This is primitive construction, can write you more when will see your code. Here we are using 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>

And a code for sorting in separate blocks using CSS only.

: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>

UPDATED

Fore any number of posts posts.

<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>
user_31871270
Related