如何以 100% 显示前 3 li，每行 2 li 以 33.33% 宽度显示？

Question

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

我所做的是，我必须以 100% 的宽度显示前 3 个 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%;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>

Answer 2

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

      
      var html = '';
      for(var i = 1; i<= 9; 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 3

您可以使用网格布局解决此问题。这是一个例子：

HTML

<div class="layout">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
  </ul>
  <div class="image-wrapper">
    <img src="some-image.png" alt="some image">
  </div>
</div>

CSS

.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 5px;
}

ul {
  display: contents;
  list-style: none;
}

li:nth-child(-n + 3) {
  background-color: #bada55;
  grid-column: 1/4;
}

li:nth-child(2n + 4) {
  background-color: skyblue;
}

li:nth-child(2n + 5) {
  background-color: lightblue;
}

.image-wrapper {
  background-color: hotpink;
  grid-column: 3/4;
  grid-row: 4/7;
}

img {
  width: 100%;
  /*just some random height to demonstrate
  that the items on the left side will keep their height
  even with a much higher image on the right side.
  I would recomment setting the height to 'auto' though.*/
  height: 250px;
}

请注意，我在此处使用的 css 技术在很大程度上不受 Internet Explorer 11 的支持，因为该浏览器使用的是较旧的网格规范。如果您也想支持 Internet Explorer 11，您可能需要找到一种解决方法。

如果您可以更改 HTML 的结构，您也可以执行以下操作：

HTML

<div class="container">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div class="columns">
    <div>
        <div>four</div>
        <div>five</div>
        <div>six</div>
        <div>seven</div>
        <div>eight</div>
        <div>nine</div>
        <div>ten</div>
        <div>eleven</div>
        <div>...and so on</div>
    </div>
    <div>
      <img src="some-image.png" alt="some image">
    </div>
  </div>
</div>

CSS

.columns {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
}

.columns > *:first-child {
  width: 66%;
  display: flex;
  flex-flow: row wrap;
}

.columns > *:first-child > * {
  width: 50%;
}

.columns > *:last-child {
  width: 34%;
}

img {
  display: block;
  width: 100%;
  height: auto;
}