gpt4 book ai didi

html - 如何使用 Flexbox 创建多列和多行

转载 作者:行者123 更新时间:2023-11-28 13:53:11 25 4
gpt4 key购买 nike

<分区>

鉴于我有以下标记:

<ul class="box">
<li class="list-item A">
<a>A</a>
</li>
<li class="list-item B">
<a>B</a>
</li>
<li class="list-item C">
<a>C</a>
</li>
<li class="list-item D">
<a>D</a>
</li>
</ul>

如何使用 Flexbox 获得以下布局?

enter image description here

我用我试过的方法创建了一支笔,但它不工作:

https://codepen.io/pbul2004/pen/LYEROLq

  • A = 25% 的图像
  • B = A 标题和副标题占 50%
  • C = 50% 的描述
  • D = Pirce 和一个 25% 的按钮

B 和 C 位于彼此之上。

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