html - 每行的备用 div 宽度

Question

所以基本上我有这个标记

<div class="container">
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
  <article>6</article>
</div>

我如何才能让每行的第一个和第二个 div 有不同的宽度？

我尝试了 article:nth-child+ diff 步进来定位备用 div，但我找不到正确的步进组合

编辑:我真的不能编辑 HTML 结构，因为这是一个 WordPress 插件输出

Answer 1

您将需要使用 :nth-child() 选择器在这里...

实际上，这里的模式在每第 4 个元素之后重复一次...因此您需要定位 4n、4n+1、4n+2 和 4n+3

.container {
  display: flex;
  flex-wrap: wrap;
}

article {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  border: 5px solid #fff;
  background: gray;
  box-sizing: border-box;
  color: #fff;
  font: bold 20px Verdana;
}

article:nth-child(4n),
article:nth-child(4n+1) {
  width: 25%
}

article:nth-child(4n+2),
article:nth-child(4n+3) {
  width: 75%
}

<div class="container">
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
  <article>6</article>
  <article>7</article>
  <article>8</article>
  <article>9</article>
  <article>10</article>
  <article>11</article>
  <article>12</article>
</div>