这个问题在这里已经有了答案:
Why is a flex item limited to parent size?
(1 个回答)
11 个月前关闭。
我正在使用 TailwindCSS 创建一个带有图像和文本的简单 View 。在移动设备上(小于 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>我希望文本只是添加更多的文本行而不是向左推。有人知道如何解决这个问题吗？
最佳答案
添加 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, 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>关于html - 右侧的大文字推到左侧的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64298176/