<!DOCTYPE html>
<html>
<head>
    <style>
        .image-container {
            display: flex;
        }
<pre><code>    .image-container img {
        margin-right: 5px;
    }
&lt;/style&gt;
</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>
HTML 实现四个图片并排显示,间距极小

原文地址: https://www.cveoy.top/t/topic/qAqJ 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录