当孩子具有负面变换translatex时，如何使父母宽度拟合内容？

发布于 2025-01-23 11:25:46 字数 1721 浏览 4 评论 0原文

这是一个示例片段，展示了我要实现的目标。 （请确保向下滚动，因为第二个示例可能会被尾风警告隐藏）

在第二个示例中，如您所见，父盒宽度保持不变，并且不会收缩到适合内容。

我相信绝对定位可能是达到我想要的徽章位置的最佳选择，但是，使用绝对定位将存在类似的问题，即父母不适合内容大小。

/*
 * These styles are just a workaround to fix tailwind/daisyui styles
 *   as for some reason daisyui doesn't override tailwind when using CDN.
 */
.img-link {
  padding:0!important;
  border:none!important;
}

<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet"/>

<h1 class="mb-2">Original box</h1>
<div class="inline-block bg-rose-400">
  <a class="btn btn-ghost normal-case text-l p-0 border-0 img-link" href="/">
    <img src="https://picsum.photos/200" class="h-full" alt="madlabz - Wild Rift Builds" />
  </a>
  <span class="badge">badge</span>
</div>

<h1 class="mt-6 mb-2">Badge has `tranform: translateX(-50%)`</h1>
<div class="inline-block bg-rose-400">
  <a class="btn btn-ghost normal-case text-l p-0 border-0 img-link" href="/">
    <img src="https://picsum.photos/200" class="h-full" alt="madlabz - Wild Rift Builds" />
  </a>
  <span class="badge -translate-x-1/2 ">badge</span>
</div>

<div style="height:8rem;"><!-- extra space so that content is scrollable and isn't hidden by tailwind warning --></div>

原文

This is an example snippet showcasing what I'm trying to achieve. (please make sure to scroll down, as the 2nd example might be hidden by tailwind warning)

In the 2nd example, as you can see, the parent box width remains the same and doesn't shrink down to fit the content.

I believe absolute positioning is probably the best to achieve the badge position that I want, however, using absolute positioning will have a similar issue of the parent not adjusting to content size.

/*
 * These styles are just a workaround to fix tailwind/daisyui styles
 *   as for some reason daisyui doesn't override tailwind when using CDN.
 */
.img-link {
  padding:0!important;
  border:none!important;
}

<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet"/>

<h1 class="mb-2">Original box</h1>
<div class="inline-block bg-rose-400">
  <a class="btn btn-ghost normal-case text-l p-0 border-0 img-link" href="/">
    <img src="https://picsum.photos/200" class="h-full" alt="madlabz - Wild Rift Builds" />
  </a>
  <span class="badge">badge</span>
</div>

<h1 class="mt-6 mb-2">Badge has `tranform: translateX(-50%)`</h1>
<div class="inline-block bg-rose-400">
  <a class="btn btn-ghost normal-case text-l p-0 border-0 img-link" href="/">
    <img src="https://picsum.photos/200" class="h-full" alt="madlabz - Wild Rift Builds" />
  </a>
  <span class="badge -translate-x-1/2 ">badge</span>
</div>

<div style="height:8rem;"><!-- extra space so that content is scrollable and isn't hidden by tailwind warning --></div>

分享到QQ

分享到微博