主要内容 div 并排

Question

我正在尝试设置一个带有页眉/页脚的登录页面，中间是四个 div。 我需要他们并肩。 我正在使用 Tailwind CSS。我不确定我做错了什么，这很烦人，因为我过去已经这样做了 100 次。

<div class="flex flex-col h-screen justify-between">
    <div class="relative flex items-top justify-center h-16 
        bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
    </div>
    <div class="flex flex-col h-screen bg-white">
        <div class="min-h-full w-1/4 bg-gray-200">
        </div>
        <div class="min-h-full w-1/4 bg-gray-400">
        </div>
        <div class="min-h-full w-1/4 bg-gray-600">
        </div>
        <div class="min-h-full w-1/4 bg-gray-800">
        </div>
    </div>
    <div class="h-14 bg-gray-100 dark:bg-gray-900 
        sm:items-center sm:pt-0">
    </div>
</div>
</template>

Answer 1

哇，我简直不敢相信我做到了。

在中间的 div 中，我需要放置 flex-row NOT flex-col

中间现在应该是这样的。

<div class="flex flex-row h-screen bg-white">
            <div class="min-h-full w-1/4 bg-gray-200">

            </div>
            <div class="min-h-full w-1/4 bg-gray-400">
                
            </div>
            <div class="min-h-full w-1/4 bg-gray-600">
                
            </div>
            <div class="min-h-full w-1/4 bg-gray-800">
                
            </div>

        </div>

Answer 2

如果我是这样做的人，我会这样做的。

我的 output：

   <div class="sm:grid grid-cols-3 gap-10  w-4/5 mx-auto py-5 border-gray-200 ">
        <div
            class="bg-gray-100 dark:bg-gray-900 sm:pt-0">1
        </div>
        <div class="bg-white">2
            <div class="min-h-full w-1/4 bg-gray-200">
                a
            </div>
            <div class="min-h-full w-1/4 bg-gray-400">
                b
            </div>
            <div class="min-h-full w-1/4 bg-gray-600">
                c
            </div>
            <div class="min-h-full w-1/4 bg-gray-800">
                d
            </div>
        </div>
        <div class="h-14 bg-gray-100 dark:bg-gray-900 
        sm:items-center sm:pt-0">3
        </div>
    </div>