我正在使用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>
答案 0 :(得分：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 ️</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>