使用flex弹性布局后图片变形/如何解决图片和文字换行问题

最新推荐文章于 2025-05-20 14:08:24 发布

雾林小妖

最新推荐文章于 2025-05-20 14:08:24 发布

阅读量157

点赞数 2

分类专栏：前端基础文章标签：前端 java javascript

本文链接：https://blog.csdn.net/tangshiyilang/article/details/147982523

版权

前端基础专栏收录该内容

5 篇文章

订阅专栏

1、问题概述？

我们在项目开发的过程中会遇到如下两个问题？

1、图片和文字显示不在同一行

<div id="content">
<img src="定位.png" alt=""><div>安徽省合肥市肥西县上派</div>
</div>

2、使用了flex弹性布局后，图片变形

使用弹性布局可以解决，图片和文字显示换行的问题，但图片变形

2、如何解决图片和文字换行问题

2.1、不使用div或使用span

不建议文字不加标签，这样我们无法调整图片和文字之间的相对位置

<div id="content">
<img src="定位.png" alt=""><span>安徽省合肥市肥西县上派</span>
</div>

2.2、使用flex弹性布局

注意点：img图片的宽高不能使用auto自动获取，或则flex-shrink: 0;属性不生效。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#content{
				width: 300px;
				height: 50px;
				border:1px solid red;
				display: flex;
			}
			img{
				
				width: 20px;
				height: 25px;
				flex-shrink: 0;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<img src="定位.png" alt=""><div>安徽省合肥市肥西县上派</div>
		</div>
	</body>
</html>