尝试在底部彼此间隔2 div

Question

我正在努力实现以下目标:

• 在图像悬停时，在底部它将在左侧显示评论/反应，在右侧显示名称

我不能得到2div之间的空间在底部，我不知道为什么。

https://play.tailwindcss.com/jyBq62Ok90是工作代码

Answer 1

您需要在绝对位置的div上设置一个宽度，例如w-full，否则div将与内容一样宽，并且之间没有空格。

看这个顺风剧

希望对你有帮助。

Answer 2

据我所知，您需要在悬停图像时突出显示注释div，并在两个div之间留出空格

您可以使用group-hover实用程序与div包装器。下面的代码将为您提供更多的帮助

<script src="https://cdn.tailwindcss.com"></script>
<div class="group">
<div class="group mb-4 flex aspect-auto w-full overflow-visible duration-300 ease-in hover:scale-105 hover:rounded-lg">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F13%2F2015%2F04%2F05%2Ffeatured.jpg&q=60" class="h-full w-full bg-gray-900 object-cover hover:opacity-40" />
</div>
<div class="bottom-0 mx-4 mb-4 hidden bg-gray-700 px-3 duration-300 group-hover:block group-hover:transition group-hover:ease-in">
<div class="flex justify-between">
<div class="flex text-sm font-medium text-white">
<ChatAlt2Icon class="h-5 w-5 text-white" />
<span class="pl-1 text-white">12</span>
<HeartIcon class="ml-2 h-5 w-5 text-white" />
<span class="pl-1 text-white">12</span>
</div>
<div class="flex text-white">Added: Today</div>
</div>
</div>
</div>