php - 如何显示前 3 里 100% 和每行 2 里 33.33% 宽度？

Question

我有一个设计。我在这里遇到一个问题。

我要做的是，我必须显示前 3 个 li 标签的 100% 宽度，并保留 li 标签的 33.33%。

这是我的预期输出

li-100% width
li-100% width
li-100% width
li-33.33% width | li-33.33% width | big image here(not a part of loop)
li-33.33% width | li-33.33% width |
li-33.33% width | li-33.33% width |

但是请注意，我正在使用 while 循环，所以我会得到类似的输出

li-100% width
li-100% width
li-100% width
li-33.33% width | li-33.33% width | li-33.33% width
li-33.33% width | li-33.33% width | li-33.33% width
li-33.33% width | li-33.33% width | li-33.33% width

我必须每行只显示 2 里。

我正在使用以下逻辑

<div class="wrapperClass">
  <ul>
    <?php
      $index = 0;
      $check=0;
       while ( condition ) {
         if ($index < 3) {?>
      <li>
        <!--width 100%-->
      </li>
      <?php }
                else{?>
      <li>
        <!--width with 33.33-->
      </li>
      <?php } $index++;}?>
  </ul>
  <img src="">
</div>

CSS

.wrapperClass ul li:nth-child(1),.wrapperClass ul li:nth-child(2),.wrapperClass ul li:nth-child(3){
    width:100%;
}
.wrapperClass ul li{width:33.33%;display: inline-block;}

你能帮我解决这个问题吗？

Answer 1

使用这个CSS

.wrapperClass ul li:nth-child(-n+3){
    width:100%;
}
.wrapperClass ul li{display: inline-block; width:33.33%;}

<div class="wrapperClass">
  <ul>
    <li>Some text</li>
    <li>Some text</li>
    <li>Some text</li>
    <li>Some text</li>
    <li>Some text</li>
  </ul>
</div>