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

Question

嘿嘿朋友们，

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

这是一个例子：

我将 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/

标签： htmlcsswordpresscss-selectors

Answer 1

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

1. 在 tobiasahlin 的博客上找到了关于如何将 flexbox 项拆分为多行的非常好的资源。
2. 在 css-tricks 上找到了关于 flex-direction的很好的解释。这还包括一个 Codepen 示例，每个 flex-direction 使用不同的 CSS 类。

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

演示：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;
}