Javascript 如何使用css并排对齐动态生成的跨元素？

Span元素不是静态的，它们将通过java脚本代码动态生成

HTML代码：

<div class="chartsHolder" id="chartsPart">
<span class="charts" id="Chart"></span>
</div>

.chartsHolder {
    width:100%; 
}
.charts {
    display:inline-block;
    height:350px;
    width:50%;
    margin: 0px;
}

我已经附上了图形的屏幕截图，请检查一下

---

如果这可以通过jquery实现，请建议我

@AlivetoDie我用了你的代码片段，但它不起作用。图表以50%的宽度依次显示。当我检查span元素“图表”时，我可以看到在span元素内部创建了两个div元素（style=“position:relative；width:100%；height:100%；）显示两个图表。我使用了宽度48%而不是50%好的，如果我将其更改为48%或46%，那么它也不会并排显示。它一个接一个地显示。您需要给我一个链接，以便我可以检查并让您知道我该如何做，我是新手，请您帮助我。@AlivetoDie我使用了您的代码片段，但它不起作用g、 图表以50%的宽度一个接一个地显示。当我检查span元素“图表”时，我可以看到在span元素内部创建了两个div元素，并使用（style=“position:relative；width:100%；height:100%；）来显示两个图表。我使用了宽度48%而不是50%OK，如果我将其更改为48%或46%，那么它也不会并排显示。它正在一个接一个地显示。你需要给我一个链接，这样我就可以检查并让你知道我该怎么做，我是新手，所以你能帮助我吗。