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

问题描述

我正在使用TailwindCSS创建带有图像和文本的简单视图。在移动设备上（小于<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>），图像应居中。文字应在图像下方。对于其他屏幕，图像应在图像的左侧，文本应在图像的右侧，紧靠图像，但边距很小。

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

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>

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

解决方法

在图像的容器中添加flex-shrink: 0应该可以解决此问题。

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