右侧的大文本推送到左侧的图像

Question

我正在使用 TailwindCSS 创建一个包含图像和文本的简单视图。在移动设备上（小于 md），图像应居中。文字应该在图片下方。对于其他屏幕，图像应在左侧，文本应在右侧，紧挨着图像，但留有小边距。

只要文本不超过一行，CSS 看起来就不错。

<link href="https://unpkg.com/tailwindcss@1.8.13/dist/tailwind.min.css" rel="stylesheet" />

<div class="md:flex">
  <div class="flex justify-center items-center">
    <img src="https://lastfm.freetls.fastly.net/i/u/270x205/92a6e1da897a4be19962d251717fabd7.jpg" class="rounded-full w-32 h-32 md:w-48 md:h-48 xl:w-64 xl:h-64" />
  </div>
  <div class="md:ml-20">
    <h3 class="text-xl leading-7 font-semibold">
      Header 1
    </h3>
    <p class="leading-6">
      Lorem ipsum dolor sit amet
    </p>
  </div>
</div>

但是当它这样做时，它会向左推，因此图像会缩小并且 CSS 会损坏。

<link href="https://unpkg.com/tailwindcss@1.8.13/dist/tailwind.min.css" rel="stylesheet" />

<div class="md:flex">
  <div class="flex justify-center items-center">
    <img src="https://lastfm.freetls.fastly.net/i/u/270x205/92a6e1da897a4be19962d251717fabd7.jpg" class="rounded-full w-32 h-32 md:w-48 md:h-48 xl:w-64 xl:h-64" />
  </div>
  <div class="md:ml-20">
    <h3 class="text-xl leading-7 font-semibold">
      Header 1
    </h3>
    <p class="mt-2 leading-6">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
  </div>
</div>

我希望文本只是添加更多行而不是向左推。有人知道如何解决这个问题吗？

Answer 1

将 flex-shrink: 0 添加到您的图像容器应该可以解决问题。

编辑： 正如@Question3r 在评论中指出的那样，更好的方法是将 class flex-shrink-0 应用于图像的容器。

<link href="https://unpkg.com/tailwindcss@1.8.13/dist/tailwind.min.css" rel="stylesheet" />

<div class="md:flex">
  <div class="flex justify-center items-center" style="flex-shrink: 0">
    <img src="https://lastfm.freetls.fastly.net/i/u/270x205/92a6e1da897a4be19962d251717fabd7.jpg" class="rounded-full w-32 h-32 md:w-48 md:h-48 xl:w-64 xl:h-64" />
  </div>
  <div class="md:ml-20">
    <h3 class="text-xl leading-7 font-semibold">
      Header 1
    </h3>
    <p class="mt-2 leading-6">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
  </div>
</div>

右侧的大文本推送到左侧的图像

Big text on the right side pushes to the image on the left side

html

css

tailwind-css