亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

如何使用Tailwind CSS將網(wǎng)格中最後一行的項(xiàng)目置中?
P粉311563823
P粉311563823 2023-08-28 20:06:09
0
1
605
<p>嘗試使用 Tailwind(使用 React)在網(wǎng)格佈局中對(duì)齊我的最終專案時(shí)遇到問題?;旧衔蚁胍?3 個(gè)項(xiàng)目,如果沒有剩下 3 個(gè)項(xiàng)目,即 2 或 1,我希望它們居中。 </p> <p>我嘗試了某種 col span,但沒有按預(yù)期工作。 </p> <p>為了更好地說明我正在嘗試做的事情,我附上了一些圖表</p> <p>目前佈局:</p> <p>所需的佈局,其中剩餘 2 個(gè)項(xiàng)目:</p> <p>所需的佈局,其中剩餘 1 項(xiàng):</p> <pre class="brush:html;toolbar:false;"><div className="xl:grid grid-cols-3 gap-4"> //cards .map(item) </div> </pre></p>
P粉311563823
P粉311563823

全部回覆(1)
P粉187677012

可以考慮使用flex、flex-wrap、justify-center

#7 項(xiàng):

#
<div class="flex flex-wrap justify-center gap-2">
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
</div>

輸出:

#8 項(xiàng)目:

#
<div class="flex flex-wrap justify-center gap-2">
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
</div>

使用tailwind-css Playground

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板