HTML CSS 实现四个图片并排显示：无间距排版
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
display: flex;
gap: 0;
}
<pre><code>.image-container div {
flex: 1;
margin: 0;
}
.image-container img {
width: 100%;
height: auto;
}
</code></pre>
</style>
</head>
<body>
<div class="image-container">
<div>
<img src="image1.jpg" alt="Image 1">
</div>
<div>
<img src="image2.jpg" alt="Image 2">
</div>
<div>
<img src="image3.jpg" alt="Image 3">
</div>
<div>
<img src="image4.jpg" alt="Image 4">
</div>
</div>
</body>
</html>
<p>在本示例中，我们使用 flex 布局来实现子级 div 的水平排列，并使用 <code>gap</code> 属性设置间距为 0。子级 div 使用 <code>flex: 1</code> 来平均分配父级 div 的宽度，并设置 <code>margin: 0</code> 来移除默认的边距。图片使用 <code>width: 100%</code> 来适应父级 div 的宽度，并使用 <code>height: auto</code> 来保持图片的纵横比例。</p>
原文地址: https://www.cveoy.top/t/topic/qAtf 著作权归作者所有。请勿转载和采集!