HTML 实现四个图片并排显示,间距极小
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
display: flex;
}
<pre><code> .image-container img {
margin-right: 5px;
}
</style>
</code></pre>
</head>
<body>
<div class='image-container'>
<img src='image1.jpg' alt='Image 1' width='200' height='200'>
<img src='image2.jpg' alt='Image 2' width='200' height='200'>
<img src='image3.jpg' alt='Image 3' width='200' height='200'>
<img src='image4.jpg' alt='Image 4' width='200' height='200'>
</div>
</body>
</html>
<p>该代码使用 <code>display: flex;</code> 属性将图片容器设置为 Flexbox 布局,并通过 <code>margin-right: 5px;</code> 设置了图片之间的间距。你可以根据需要修改图片的宽度、高度、路径和间距大小。</p>
原文地址: https://www.cveoy.top/t/topic/qAqJ 著作权归作者所有。请勿转载和采集!