当前位置：首页 > 行业动态 > 正文

html中并排图片

admin
行业动态
2025-05-13
1

在HTML中，通过CSS设置图片display:inline-block或使用flex布局，调整间距与对齐即可

使用CSS浮动（Float）

通过float属性让图片脱离文档流，配合clear清除浮动。

示例代码

<style>
  .container { overflow: hidden; } / 清除浮动 /
  .container img { float: left; margin-right: 10px; }
</style>
<div class="container">
  <img src="img1.jpg" alt="图1">
  <img src="img2.jpg" alt="图2">
  <img src="img3.jpg" alt="图3">
</div>

特点

需手动清除浮动，适合简单布局，但难以垂直对齐

Flex布局

利用display: flex自动排列元素。

html中并排图片第1张

示例代码

<style>
  .flex-container { display: flex; gap: 15px; }
  .flex-container img { width: 100px; } / 固定宽度或按比例缩放 /
</style>
<div class="flex-container">
  <img src="img1.jpg" alt="图1">
  <img src="img2.jpg" alt="图2">
  <img src="img3.jpg" alt="图3">
</div>

优势

自动处理间隙、对齐，支持响应式（配合`flex-wrap: wrap`）

Grid布局

通过网格系统精准控制位置。

示例代码

<style>
  .grid-container { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); / 3列等分 /
    gap: 20px; 
  }
</style>
<div class="grid-container">
  <img src="img1.jpg" alt="图1">
  <img src="img2.jpg" alt="图2">
  <img src="img3.jpg" alt="图3">
</div>

适用场景

需要精确控制行列时（如瀑布流布局）