如何显示前三个li为100％，每行2 li为33.33％宽度？

Question

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

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

这是我的预期输出

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

我正在使用以下逻辑

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

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

Answer 1

您可以做这样的事情。此代码仅供参考。

      
      var html = '';
      for(var i = 1; i<= 10; i++){
      
        if(i <= 3){
          html += "<li class='fullli'> full </li> ";
          
        }else {
           html += "<li class='halflli'> half </li> ";
        }
      }
      
      $('.mainul').html(html);

.fullli {
  width : 100%;
}
.halflli {
  width : 33%;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapperClass">
  <ul class="mainul">
   
  </ul>
  <img src="">
</div>

Answer 2

使用此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>