每行交替的div宽度

Question

所以基本上我有这个标记

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

我如何能够为第一个＆amp;每行第二个div？

我尝试article:nth-child +差异步进以定位替代div，但我无法找到正确的步进组合

编辑：我真的无法编辑HTML结构，因为这是一个WordPress插件输出

Answer 1

您需要在此处使用 :nth-child() 选择器...

实际上这里的模式在每第4个元素之后重复......所以你需要taregt 4n，4n+1，4n+2和4n+3

＆＃13;

＆＃13;

.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%
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你应该申请课程来正确调整文章，只使用两个宽度分别为66％和33％

的课程

Answer 3

    1     2     3     4     五     6

article 
{
  float:left;
  height:50px;
  width: 30%;
  background: #444;
  margin: 0 0 5px 0;
}
article:nth-child(2n) {
  background: #f0f;
  width: 70%;
  float: right;
}
article:nth-child(3n) {
  width: 70%;
}
article:nth-child(4n) {
  width: 30%;
  float: right;
}

Answer 4

您可以使用flexbox。带显示屏：flex; flex-wrap：wrap; on＆＃34; .container＆＃34;和flex-grow：1; flex-shrink：1;在文章上。文章将根据内容获得宽度。

使用flexbox，您可以执行任何操作，这是一个很好的教程https://css-tricks.com/snippets/css/a-guide-to-flexbox/