如何解决右侧的大文本将推送到左侧的图像
我正在使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。