如何使用 nth-child 更改每隔一个 wordpress 帖子的位置？

Posted 2023-03-06

【中文标题】如何使用 nth-child 更改每隔一个 wordpress 帖子的位置？

【英文标题】：How to change the position of every second wordpress post using nth-child?

【发布时间】：2021-03-25 14:06:24

【问题描述】：

朋友们，

我正在尝试这样做，我想从左到右更改每隔一个帖子的位置。

这是一个例子：

我将 nth-child(even) 用于“主要内容”，它工作正常，但对于其他 div，它根本不起作用。

CSS：

.archive-cc 
    position: relative;
    padding-right: 5%;
    padding-left: 5%;
    width: 100%;
    height: 300px;
    z-index: 80;
    background-color: floralwhite;
    border-bottom: pink 10px solid;


.archive-content 
    position: relative;
    float: right;
    margin: 0 auto;
    width: 80%;
    z-index: 50;
    background-color: dodgerblue;


.archive-cc:nth-child(even)>div 
    position: relative;
    float: left;
    margin: 0 auto;
    width: 80%;
    z-index: 50;


.meta 
    float: left;
    background-color: yellow;
    width: 20%;


.meta-text 
    width: 100%;
    background-color: yellow;


.meta:nth-child(even)>div 
    float: right;
    width: 100%;
    background-color: hotpink;

HTML：

<div class="archive-cc">
  <div class="meta">
    <div class="meta-text">PLS WOOOORK</div>
  </div>
  <div class="archive-content">
    <h2 class="entry-title"><a href="test">test</a>test</h2>
    <div class="entry-summary">test</div>
  </div>
</div>

我真的已经尝试了一切，我希望有人可以帮助我！现在看起来像这样：http://helga-fruehauf-koehler.de/wordpress/fotografie/

【参考方案1】：

我建议不要在这里使用任何浮动布局，而是flexbox 来达到您的目标。现代浏览器支持这一点，并且更易于使用。

在how to split flexbox items into multiple rows at tobiasahlin's blog 上找到了一个非常好的资源。 在flex-direction on css-tricks 上找到了很好的解释。这还包括一个 Codepen 示例，每个 flex-direction 使用不同的 CSS 类。

这是我使用nth-child pseudo class 的解决方案，它从上面的示例中抽象出.row 和.row-reverse CSS 类。

演示：https://jsfiddle.net/vp8xbqus/1/

代码：

HTML

<div class="wrapper">
<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
</ul>

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
</ul>
  
<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
</ul>

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
</ul>

<!-- add more boxes as above -->

</div>

CSS

.wrapper 
  background: blue;
  margin: 20px;


.flex-container 
  padding: 0;
  margin: 0;
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;


.flex-item 
  background: tomato;
  padding: 5px;
  width: 50%;
  height: 50px;
  margin: 5px;
  
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;


// Abstraction for .row and .row-reverse styles based on nth-child

.wrapper :nth-child(odd) 
  -webkit-flex-direction: row; 
  flex-direction: row;


.wrapper :nth-child(odd) :first-child 
  flex-basis: 100px;
  background: green;


.wrapper :nth-child(even)  
  -webkit-flex-direction: row-reverse; 
  flex-direction: row-reverse;


.wrapper :nth-child(even) :first-child 
  flex-basis: 100px;
  background: gold;