gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:01:06 34 4
gpt4 key购买 nike

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

enter image description here

我要做的是,我必须显示前 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;}

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

最佳答案

使用这个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>

关于php - 如何显示前 3 里 100% 和每行 2 里 33.33% 宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58988147/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com