如何在HTML/JS中让三个不同元素并排显示（尽量不使用float属性）

问题根源 #

你的代码里有几个关键问题导致元素无法正常并排：

• 外层容器用了display: inline，这种布局不适合控制多个块级元素并排，还额外设置了width: 0%，直接限制了容器宽度
• 两个SVG的宽高设成了2000px，这会占据超大页面空间，把其他元素挤到奇怪位置
• 内层包裹SVG的div加了width: 0%，导致容器宽度异常，打乱布局逻辑

简洁CSS解决方案（推荐，比JS简单） #

用Flex布局就能轻松实现元素并排，同时调整SVG尺寸，去掉多余嵌套和错误样式：

<!-- 外层容器用flex布局，让子元素横向排列 -->
<div style="display: flex; align-items: center; gap: 20px;">
    <!-- 第一个SVG：简化结构，设置合适宽高 -->
    <div>
        <svg class="fry" width="300" height="600">
            <rect x="0" y="0" width="300" height="600" rx="15" stroke="black" stroke-width="25" fill="#DAA520" />
        </svg>
    </div>

    <!-- 图片：设置最大高度和SVG保持一致，避免尺寸差异 -->
    <div>
        <img src="images/frenchfry.png" style="max-height: 600px;">
    </div>
    
    <!-- 第二个SVG：同样简化结构 -->
    <div>
        <svg class="store" width="300" height="600">
            <rect x="0" y="0" width="300" height="600" rx="15" stroke="black" stroke-width="25" fill="#DAA520" />
        </svg>
    </div>
</div>

关键修改点说明 #

• 外层容器用display: flex：这是目前最便捷的横向布局方式，默认让子元素并排
• align-items: center：让三个元素在垂直方向居中对齐，避免高低不一
• gap: 20px：给元素之间留空隙，不会挤在一起
• 简化SVG结构：去掉嵌套的<svg>标签，直接设置SVG宽高为矩形尺寸（300x600），避免超大尺寸占用空间
• 给图片加max-height: 600px：让图片高度和SVG保持一致，整体更协调

可选JS实现（没必要，CSS更简单） #

如果一定要用JS，核心是修改容器布局样式和元素尺寸：

// 获取外层容器并设置flex布局
const container = document.querySelector('div');
container.style.display = 'flex';
container.style.alignItems = 'center';
container.style.gap = '20px';

// 调整所有SVG的宽高并简化结构
const svgs = document.querySelectorAll('svg');
svgs.forEach(svg => {
    svg.width = 300;
    svg.height = 600;
    // 移除嵌套的子svg，把矩形直接放到外层svg里
    const innerSvg = svg.querySelector('svg');
    if (innerSvg) {
        svg.appendChild(innerSvg.querySelector('rect'));
        innerSvg.remove();
    }
});

// 调整图片高度和SVG匹配
const img = document.querySelector('img');
img.style.maxHeight = '600px';

内容的提问来源于stack exchange，提问作者Nether-Knight 61