0

我正在使用Flexbox和Tailwindcss。

我有2行。第一行有3 个项目，第二行有1 个项目。由于某种原因，第二行中的项目略大于第一行中的项目。

这里可能有什么问题，我猜是 flexbox 的问题，因为当我删除flex类时，它会正确匹配。但随后该项目不在同一行。

我做了一个代码片段：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>

    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto">
    <div class="flex w-full">
        <div class="w-1/3 m-2">
            <div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
                <div>
                    <img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">

                    <div class="px-6 py-4">
                        <div class="flex items-center">
                            <p class="font-bold text-xl">Name</p>
                        </div>

                        <p class="text-grey-darker text-base">
                            Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4">
                    <span class="label-grey mr-2">13 °C ☀️️</span>

                    <span class="label-grey mr-2">12 km/h ️&lt;/span>
                    <span class="label-grey">
                        <span class="center">
                             Netherlands

                            <img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
                        </span>
                    </span>
                </div>
            </div>
        </div>

        <div class="w-1/3 m-2">
            <div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
                <div>
                    <img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">

                    <div class="px-6 py-4">
                        <div class="flex items-center">
                            <p class="font-bold text-xl">Name</p>
                        </div>

                        <p class="text-grey-darker text-base">
                            Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4">
                    <span class="label-grey mr-2">13 °C ☀️️</span>

                    <span class="label-grey mr-2">12 km/h ️&lt;/span>
                    <span class="label-grey">
                        <span class="center">
                             Netherlands

                            <img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
                        </span>
                    </span>
                </div>
            </div>
        </div>

        <div class="w-1/3 m-2">
            <div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
                <div>
                    <img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">

                    <div class="px-6 py-4">
                        <div class="flex items-center">
                            <p class="font-bold text-xl">Name</p>
                        </div>

                        <p class="text-grey-darker text-base">
                            Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4">
                    <span class="label-grey mr-2">13 °C ☀️️</span>

                    <span class="label-grey mr-2">12 km/h ️&lt;/span>
                    <span class="label-grey">
                        <span class="center">
                             Netherlands

                            <img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="flex w-full">
        <div class="w-1/3 m-2">
            <div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
                <div>
                    <img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">

                    <div class="px-6 py-4">
                        <div class="flex items-center">
                            <p class="font-bold text-xl">Name</p>
                        </div>

                        <p class="text-grey-darker text-base">
                            Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4">
                    <span class="label-grey mr-2">13 °C ☀️️</span>

                    <span class="label-grey mr-2">12 km/h ️&lt;/span>
                    <span class="label-grey">
                        <span class="center">
                             Netherlands

                            <img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

4

1 回答 1

1

使用 <div class="w-1/3 mt-2 p-2">意味着应用padding并在第二行中margin-top置顶div

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>

    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto">
    <div class="flex flex-no-shrink w-full">
        <div class="w-1/3 m-2">
            <div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
                <div>
                    <img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">

                    <div class="px-6 py-4">
                        <div class="flex items-center">
                            <p class="font-bold text-xl">Name</p>
                        </div>

                        <p class="text-grey-darker text-base">
                            Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4">
                    <span class="label-grey mr-2">13 °C ☀️️</span>

                    <span class="label-grey mr-2">12 km/h ️&lt;/span>
                    <span class="label-grey">
                        <span class="center">
                             Netherlands

                            <img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
                        </span>
                    </span>
                </div>
            </div>
        </div>

        <div class="w-1/3 m-2">
            <div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
                <div>
                    <img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">

                    <div class="px-6 py-4">
                        <div class="flex items-center">
                            <p class="font-bold text-xl">Name</p>
                        </div>

                        <p class="text-grey-darker text-base">
                            Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4">
                    <span class="label-grey mr-2">13 °C ☀️️</span>

                    <span class="label-grey mr-2">12 km/h ️&lt;/span>
                    <span class="label-grey">
                        <span class="center">
                             Netherlands

                            <img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
                        </span>
                    </span>
                </div>
            </div>
        </div>

        <div class="w-1/3 m-2">
            <div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
                <div>
                    <img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">

                    <div class="px-6 py-4">
                        <div class="flex items-center">
                            <p class="font-bold text-xl">Name</p>
                        </div>

                        <p class="text-grey-darker text-base">
                            Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4">
                    <span class="label-grey mr-2">13 °C ☀️️</span>

                    <span class="label-grey mr-2">12 km/h ️&lt;/span>
                    <span class="label-grey">
                        <span class="center">
                             Netherlands

                            <img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="flex flex-no-shrink w-full">
        <div class="w-1/3 mt-2 p-2">
            <div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
                <div>
                    <img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">

                    <div class="px-6 py-4">
                        <div class="flex items-center">
                            <p class="font-bold text-xl">Name</p>
                        </div>

                        <p class="text-grey-darker text-base">
                            Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4">
                    <span class="label-grey mr-2">13 °C ☀️️</span>

                    <span class="label-grey mr-2">12 km/h ️&lt;/span>
                    <span class="label-grey">
                        <span class="center">
                             Netherlands

                            <img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

于 2018-09-03T08:29:59.583 回答