css 让图片水平排列，为什么变成梯形了？
在 html 中使用
标签来换行可能会导致图片变成梯形，因为
会在图片下方创建新的行。
如何解决：
为了让图片水平排列，可以使用 css 的弹性布局：
立即学习“前端免费学习笔记（深入）”；
- 将图片容器 设置为弹性布局：display: flex; flex-wrap: wrap;
- 给图片设置 max-width 和 margin-right，以控制图片的大小和间距，例如：max-width: 100px; margin-right: 10px;
修改后的 html 代码：
<html>
<head>
<title>Image Gallery</title>
<style>
.image-container {
display: flex;
flex-wrap: wrap;
}
.image-container img {
max-width: 100px;
margin-right: 10px;
}
h1 {
clear: both;
}
</style>
</head>
<body>
<h1>Image Gallery</h1>
<div class="image-container">
<!-- 图片标签 -->
</div>
</body>
</html>登录后复制
本文采摘于网络，不代表本站立场，转载联系作者并注明出处：https://www.iotsj.com//kuaixun/6586.html
