html - Flexbox 元素不应该增长

标签 html css flexbox tailwind-css

我正在使用 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 💨️</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 💨️</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 💨️</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 💨️</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>

最佳答案

使用 <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 💨️</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 💨️</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 💨️</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 💨️</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>

关于html - Flexbox 元素不应该增长，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52145813/

上一篇：css - 使用 CSS3 动画设置间隔

下一篇：css - 所有边距都相等，但有些边距比其他边距更相等

相关文章：

html - Iframe 切断了 <div> 中的大部分内容

html - 为H1设置多种背景颜色

jquery - 我的网页底部有一些不必要的空白，有人可以帮我去掉吗？

html - 将 Material-UI 文本字段与段落对齐

javascript - 如何检查我的浏览器是否支持媒体类型？

html - 当在 CSS 中将显示设置为 TD block 以使单元格可点击时，它们的大小会发生可怕的调整/HTML - CSS

CSS 2 列布局

html - 如何在 flex 容器中放置 3 个大小相等的 flex 元素(div)

html - 如何使我的文本在 DIV 中垂直对齐？

javascript - 如果元素可见，CSS 更改正文边距大小

©2024 IT工具网  联系我们