在html5页面开发中，实现两张图片并排展示是常见的前端布局需求，不同的实现方式适用于不同的场景，开发者可以根据页面的整体布局要求选择合适的方法。
使用float浮动属性实现
float是css中传统的布局属性，通过设置图片的浮动方向可以让两张图片并排排列，这种方式兼容性较好，适合需要适配旧版本浏览器的场景。
首先需要在html中定义两个<img>标签，然后通过css设置它们的浮动属性，同时要注意清除浮动避免影响后续元素布局。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float实现图片并排</title>
<style>
.img-container {
overflow: hidden; /* 清除浮动 */
width: 800px;
margin: 0 auto;
}
.img-left {
float: left;
width: 48%;
margin-right: 4%;
}
.img-right {
float: left;
width: 48%;
}
/* 设置图片自适应容器宽度 */
.img-left img, .img-right img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="img-container">
<div class="img-left">
<img src="https://ipipp.com/img1.jpg" alt="第一张图片">
</div>
<div class="img-right">
<img src="https://ipipp.com/img2.jpg" alt="第二张图片">
</div>
</div>
</body>
</html>
使用flex弹性布局实现
flex是css3推出的弹性布局方案，布局逻辑更清晰，控制也更灵活，是目前主流的布局方式，适合现代浏览器环境。
只需要给图片的父容器设置display: flex属性，就可以让内部的子元素水平排列，还可以通过justify-content控制间距，align-items控制垂直对齐方式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex实现图片并排</title>
<style>
.img-container {
display: flex;
gap: 20px; /* 两张图片之间的间距 */
width: 800px;
margin: 0 auto;
}
.img-item {
flex: 1; /* 两张图片平分容器宽度 */
}
.img-item img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="img-container">
<div class="img-item">
<img src="https://ipipp.com/img1.jpg" alt="第一张图片">
</div>
<div class="img-item">
<img src="https://ipipp.com/img2.jpg" alt="第二张图片">
</div>
</div>
</body>
</html>
使用inline-block属性实现
inline-block可以让元素既拥有块级元素的宽高设置能力，又拥有行内元素的同行排列特性，也可以用来实现两张图片并排。
需要注意的是，inline-block元素之间会有默认的空白间隙，需要通过设置父容器的font-size: 0来消除，再给子元素重新设置字体大小。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inline-block实现图片并排</title>
<style>
.img-container {
font-size: 0; /* 消除inline-block默认间隙 */
width: 800px;
margin: 0 auto;
}
.img-item {
display: inline-block;
width: 48%;
margin-right: 4%;
font-size: 16px; /* 恢复子元素字体大小 */
vertical-align: top; /* 顶部对齐 */
}
.img-item:last-child {
margin-right: 0;
}
.img-item img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="img-container">
<div class="img-item">
<img src="https://ipipp.com/img1.jpg" alt="第一张图片">
</div>
<div class="img-item">
<img src="https://ipipp.com/img2.jpg" alt="第二张图片">
</div>
</div>
</body>
</html>
不同方案对比
三种常见实现方式的特性对比如下：
| 实现方式 | 兼容性 | 布局灵活性 | 适用场景 |
|---|---|---|---|
| float浮动 | 非常好，支持所有浏览器 | 一般，需要手动处理清除浮动 | 需要适配旧版本浏览器的项目 |
| flex弹性布局 | 支持IE10及以上现代浏览器 | 非常高，可轻松控制对齐、间距、响应式 | 现代浏览器项目，需要灵活布局的场景 |
| inline-block | 较好，支持IE8及以上浏览器 | 中等，需要处理默认间隙问题 | 简单并排布局，不需要复杂控制的场景 |
注意事项
- 无论使用哪种方式，都建议给<img>标签设置
width: 100%; height: auto，让图片自适应父容器宽度，避免图片溢出。 - 如果页面需要适配移动端，建议给父容器添加
max-width: 100%属性，避免在小屏幕上出现横向滚动条。 - 使用float布局时，一定要给父容器清除浮动，否则父容器会因为没有内容高度而塌陷，影响后续元素布局。
html5img标签css_flex布局float属性修改时间：2026-07-12 13:09:28