在顺风css中不使用flexbox而在左右侧带来除了标题之外的图像？

ddrv8njm 于 2023-05-23 发布在其他

关注(0)|答案(2)|浏览(137)

我想把图片放在标题旁边。它不应该占用标题空间，但应该在它旁边。
左边或右边。具体来说，正方形图像应该是我所示的黑色圆圈。就在标题旁边。

我不能在这里使用Flexbox。
我也不想使用绝对定位，因为我有20多个图像，我必须在着陆页上显示。
我有一个绝对定位的工作代码，但它需要大量的计算。具体地说，我必须从顶部计算translate-y，所以有很多translate-y-[20%]，translate-y-[139%]等。
我也大多不能改变布局，因为我使用@tailwind/typography，这需要一个特定的布局。
每个孩子都应该低于.prose类。
我有img就在h2下面，我想在h2的左边或右边。
代码看起来像这样：

<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Body -->
<main class="flex min-h-screen bg-gray-900">
  <div class="grid grid-cols-[1fr,min(70ch,calc(100%-64px)),1fr] gap-8 overflow-auto p-8 [&>*]:col-start-2">
    <div class="prose grid grid-cols-[70px_1fr_70px] border-8 border-red-400 bg-gray-100 [&>*]:col-start-2">
      <h2>this is my first headline</h2>
      <img class="h-32 w-32" src="https://picsum.photos/300/300?blur" alt="temp img 1" />
      <p>i want to make the image come besides the headline</p>
      <p>i don't want to use absolute positioning unless</p>
      <p>i can make sure the images come on the side of headline</p>
      <p>i have a landing page with 20+ images</p>
      <p>and i want them on the left & right side of each `h2` tag</p>
      <p>they must not overlap with `h2` but be on the edges of the red border</p>
      <h2>this is my second headline</h2>
      <img class="h-32 w-32" src="https://picsum.photos/200/200?blur" alt="temp img 2" />
      <p>i want the first image on the right side</p>
      <p>and the second one on the left side</p>
      <p>how do i do it?</p>
      <p>i tried using translate-x & relative positioning with no luck</p>
      <p>i want it to be in a way that i don't have to use top-[300px] or some random position</p>
      <p>i don't want to keep calculating</p>
      <p>ideally, i'd love to keep the same structure of `h2` & `img` as siblings</p>
      <p>if its not possible, i'd love to have a `h2` & `img` wrapped in a `div`</p>
      <p>or better version would be `img` (absolute) wrapped inside `h2` with a `relative` position</p>
    </div>
  </div>
</main>

我已经显示了2个图像，但我有20+在我的实际着陆页的图像。
我也在代码本身中给出了解释。
演示可以在tailwind play → https://play.tailwindcss.com/oxshT4UNKX上看到（编辑代码并单击共享以共享最新版本）
我想避免计算，如果在所有可能的方式，图像停留在左边和右边的红色边框。
如何在不改变布局的情况下做到这一点？
我认为div.relative.flex > {h2,img}是一个更糟糕的布局，但h2.relative > img.absolute与@tailwind/typography一起使用要好得多。

css

来源：https://stackoverflow.com/questions/76311811/bring-image-besides-headline-on-the-left-right-side-in-tailwind-css-without-us

2条答案

按热度按时间

vsikbqxv1#

如果要保留网格布局，可以修改网格列轨道，使图像有足够的宽度，然后根据需要定位标题和图像：

<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>

<!-- Body -->
<main class="flex min-h-screen bg-gray-900">
  <div class="grid grid-cols-[1fr,min(70ch,calc(100%-64px)),1fr] gap-8 overflow-auto p-8 [&>*]:col-start-2">
    <div class="prose grid grid-cols-[70px_calc(theme(spacing.32)-70px)_1fr_calc(theme(spacing.32)-70px)_70px] border-8 border-red-400 bg-gray-100 [&>*]:col-start-2 [&>*]:col-span-3 grid-flow-dense">
      <h2 class="!col-start-2 !col-span-2">this is my first headline</h2>
      <img class="h-32 w-32 !col-start-4 !col-span-2" src="https://picsum.photos/300/300?blur" alt="temp img 1" />
      <p>i want to make the image come besides the headline</p>
      <p>i don't want to use absolute positioning unless</p>
      <p>i can make sure the images come on the side of headline</p>
      <p>i have a landing page with 20+ images</p>
      <p>and i want them on the left & right side of each `h2` tag</p>
      <p>they must not overlap with `h2` but be on the edges of the red border</p>
      <h2 class="!col-start-3 !col-span-2">this is my second headline</h2>
      <img class="h-32 w-32 !col-start-1 !col-span-2" src="https://picsum.photos/200/200?blur" alt="temp img 2" />
      <p>i want the first image on the right side</p>
      <p>and the second one on the left side</p>
      <p>how do i do it?</p>
      <p>i tried using translate-x & relative positioning with no luck</p>
      <p>i want it to be in a way that i don't have to use top-[300px] or some random position</p>
      <p>i don't want to keep calculating</p>
      <p>ideally, i'd love to keep the same structure of `h2` & `img` as siblings</p>
      <p>if its not possible, i'd love to have a `h2` & `img` wrapped in a `div`</p>
      <p>or better version would be `img` (absolute) wrapped inside `h2` with a `relative` position</p>
    </div>
  </div>
</main>

否则，您可以浮动图像：

<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>

<!-- Body -->
<main class="flex min-h-screen bg-gray-900">
  <div class="grid grid-cols-[1fr,min(70ch,calc(100%-64px)),1fr] gap-8 overflow-auto p-8 [&>*]:col-start-2">
    <div class="prose border-8 border-red-400 bg-gray-100 px-[70px]">
      <img class="h-32 w-32 float-right -mr-[70px]" src="https://picsum.photos/300/300?blur" alt="temp img 1" />
      <h2>this is my first headline</h2>
      <p>i want to make the image come besides the headline</p>
      <p>i don't want to use absolute positioning unless</p>
      <p>i can make sure the images come on the side of headline</p>
      <p>i have a landing page with 20+ images</p>
      <p>and i want them on the left & right side of each `h2` tag</p>
      <p>they must not overlap with `h2` but be on the edges of the red border</p>
      <img class="h-32 w-32 float-left -ml-[70px]" src="https://picsum.photos/200/200?blur" alt="temp img 2" />
      <h2>this is my second headline</h2>
      <p>i want the first image on the right side</p>
      <p>and the second one on the left side</p>
      <p>how do i do it?</p>
      <p>i tried using translate-x & relative positioning with no luck</p>
      <p>i want it to be in a way that i don't have to use top-[300px] or some random position</p>
      <p>i don't want to keep calculating</p>
      <p>ideally, i'd love to keep the same structure of `h2` & `img` as siblings</p>
      <p>if its not possible, i'd love to have a `h2` & `img` wrapped in a `div`</p>
      <p>or better version would be `img` (absolute) wrapped inside `h2` with a `relative` position</p>
    </div>
  </div>
</main>

赞(0）回复(0）举报 2023-05-23

093gszye2#

我改变了布局，不使用网格，并很快找到了一个不依赖于绝对定位的解决方案。

<main class="flex min-h-screen bg-gray-900">
  <div class="dark:prose-light prose prose-lg mx-auto my-4 max-w-[750px] overflow-auto rounded-lg border-8 border-red-400 bg-gray-100 px-24 py-16">
    <h2 class="relative">
      this is my first headline
      <img class="absolute -right-44 -top-24 z-10 h-32 w-32" src="https://picsum.photos/300/300?blur" alt="temp img 1" />
    </h2>
    <p>i want to make the image come besides the headline</p>
    <p>i don't want to use absolute positioning unless</p>
    <p>i can make sure the images come on the side of headline</p>
    <p>i have a landing page with 20+ images</p>
    <p>and i want them on the left & right side of each `h2` tag</p>
    <p>they must not overlap with `h2` but be on the edges of the red border</p>
    <h2 class="relative">
      this is my second headline and it works like the best thing in the world
      <img class="absolute -left-44 -top-20 z-10 h-32 w-32" src="https://picsum.photos/200/200?blur" alt="temp img 2" />
    </h2>
    <p>i want the first image on the right side</p>
    <p>and the second one on the left side</p>
    <p>how do i do it?</p>
    <p>i tried using translate-x & relative positioning with no luck</p>
    <p>i want it to be in a way that i don't have to use top-[300px] or some random position</p>
    <p>i don't want to keep calculating</p>
    <p>ideally, i'd love to keep the same structure of `h2` & `img` as siblings</p>
    <p>if its not possible, i'd love to have a `h2` & `img` wrapped in a `div`</p>
    <p>or better version would be `img` (absolute) wrapped inside `h2` with a `relative` position</p>
  </div>
</main>

h2包含了我做的img，而h2是relative ...然后我用top，left，& right来定位它们自己。
顺风游戏在这里→ https://play.tailwindcss.com/yWhtSK9dYX

赞(0）回复(0）举报 2023-05-23

我来回答

在顺风css中不使用flexbox而在左右侧带来除了标题之外的图像？

2条答案

相关问题

热门标签

最新问答