右侧的大文本推送到左侧的图像[重复]

Posted 2023-03-07

【中文标题】右侧的大文本推送到左侧的图像[重复]

【英文标题】：Big text on the right side pushes to the image on the left side [duplicate]

【发布时间】：2021-01-25 14:31:45

【问题描述】：

我正在使用 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>

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

【参考方案1】：

将flex-shrink: 0 添加到图像的容器应该可以修复它。

编辑：正如@Question3r 在 cmets 中指出的那样，更好的方法是将 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>

【讨论】：

啊，是的，解决了它:) 我可以将它添加到课程列表flex-shrink-0 而不是style="flex-shrink: 0"

酷，不知道这个类名。我会编辑答案。