如何在 HTML/JS 中将三个不同的元素彼此相邻放置（最好没有 float 属性）？ （初学者的问题）

Question

我目前正在开发一款点击游戏（在浏览器中玩），并且在将三个元素彼此相邻放置时遇到问题。我会在代码中交叉引用 JavaScript 文件，因此我也会接受 JavaScript 答案，因为通过 JavaScript 可能会更简单。我对编码还很陌生，所以请尽量让事情变得简单，但如果没有简单的解决方案也没关系。

我将在下面添加一大块代码来说明我所做的事情，但我的想法是将所有三个元素（两个 SVG 矩形和一个 PNG img）放入一个

容器中，并使用 style="display: inline" 属性希望将它们全部放在一起，而是将两个矩形放在一起（这对矩形比我希望的更向右浮动）并且 PNG 位于页面底部附近的某个位置。

<div style="display: inline; width: 0%">
            <div style="display: inline-block; width: 0%">
            <svg class="fry" width="2000" height="2000">
                <svg x="50" y="50">
                <rect style="background-color:#DAA520" x="0" y="0" width="300"                     height="600" rx="15" stroke="black" stoke-width="25" fill="#DAA520" />
                </svg>
            </svg>
            </div>

            <div x="1000" y="1000" style="display: inline-block">
                <img src="images/frenchfry.png">
            </div>
            
            <div style="display: inline-block; width: 0%">
            <svg class="store" width="2000" height="2000">
                <svg x="1150" y="50">
                <rect style="background-color:#DAA520" x="0" y="0" width="300" height="600" rx="15" stroke="black" stoke-width="25" fill="#DAA520" />
                </svg>
                        </svg>
            </div>

        </div>

我不确定这就是你要找的，但你可以使用 css 来设置它的样式。 如果您想将元素彼此相邻放置，请尝试以下操作：（将样式放在部分中）

<style>
    .container{
        display: flex;
        justify-content: 'space-around';
        align-items: 'center';
    }
</style>

尝试将您想要并排放置的所有三个元素放入一个 div 中，然后放入 ad

<div class="container">
    // Elements you want to put next to each other
</div>

希望这有帮助。

Answer 1

我不确定这就是你要找的，但你可以使用 css 来设置它的样式。 如果您想将元素彼此相邻放置，请尝试以下操作：（将样式放在部分中）

<style>
    .container{
        display: flex;
        justify-content: 'space-around';
        align-items: 'center';
    }
</style>

尝试将您想要并排放置的所有三个元素放入一个 div 中，然后放入 ad

<div class="container">
    // Elements you want to put next to each other
</div>

希望这有帮助。