css 尾风-立柱方向错误

8aqjt8rx 于 2023-01-18 发布在其他

关注(0)|答案(1)|浏览(90)

我有一个柱网轴线为2的简单Flexbox。

<div class="flex relative">
        <div class="columns-2 gap-4 space-y-4">
            <div class="bg-red-500 p-10">1</div>
            <div class="bg-blue-500 p-10 py-14">2</div>
            <div class="bg-orange-500 p-10 py-20">3</div>
            <div class="bg-green-500 p-10">4</div>
        </div>
    </div>

问题是列的排列方向“错误”。第一行包含div1和div3，但我希望它包含div1和div2。如何更改方向？

我希望div像这样对齐：

css

来源：https://stackoverflow.com/questions/75133670/tailwindcss-columns-in-wrong-direction

1条答案

按热度按时间

41zrol4v1#

实际上您没有使用tailwind-css的网格!!要使用，请将columns:2更改为grid grid-cols-2

<div class="flex relative">
        <div class="grid grid-cols-2 gap-4 space-y-4"> 👈 grid grid-cols-2
            <div class="bg-red-500 p-10">1</div>
            <div class="bg-blue-500 p-10 py-14">2</div>
            <div class="bg-orange-500 p-10 py-20">3</div>
            <div class="bg-green-500 p-10">4</div>
        </div>
    </div>

现在，您可以看到div1和div2位于同一行。

编辑：

但是这会使div定位，但是网格看起来很相似。如何克服这个问题？
使用以下代码：

<div class="grid grid-cols-2 grid-rows-5 gap-4">
  <div class="row-span-2 flex h-64 items-center justify-center bg-red-500 text-5xl">1</div>
  <div class="row-span-3 flex items-center justify-center bg-blue-500 text-5xl">2</div>
  <div class="row-span-2 flex items-center justify-center bg-orange-500 text-5xl">3</div>
  <div class="row-span-2 flex items-center justify-center bg-green-500 text-5xl">4</div>
</div>

输出：

赞(0）回复(0）举报 2023-01-18

我来回答

css 尾风-立柱方向错误

1条答案

编辑：

相关问题

热门标签

最新问答