Html 绝对位置正在崩溃

HTML:

<div>
    <div id="Science" class="subjectsParent">
        <div class="subject" draggable="true">
            Science
        </div>
        <div class="subject" draggable="true">
            Science
        </div>
        <div class="subject" draggable="true">
            Science
        </div>
    </div>

    <div id="Sports" class="subjectsParent">
        <div class="subject" draggable="true">
            Sports
        </div>
        <div class="subject" draggable="true">
            Sports
        </div>
        <div class="subject" draggable="true">
            Sports
        </div>
    </div>
    <div id="Physics" class="subjectsParent">
        <div class="subject" draggable="true">
            Physics
        </div>
        <div class="subject" draggable="true">
            Physics
        </div>
        <div class="subject" draggable="true">
            Physics
        </div>
    </div>
</div>

.subject {
    display: block;
    position: absolute;
    background-color: green;
    margin: 5px;
    padding: 5px;
    color: white;
}

.subjectsParent {
    display: inline-block;
    position: relative;
}

所有的div都在崩溃

看这里

我想要的是，只有相同的科目应该在“主修科目专修”课程中合并在一起

我想要的结果：

<div>
    <div id="Science" class="subjectsParent">
        <div class="subject" draggable="true">
            Science
        </div>
        <div class="subject" draggable="true">
            Science
        </div>
        <div class="subject" draggable="true">
            Science
        </div>
    </div>

    <div id="Sports" class="subjectsParent">
        <div class="subject" draggable="true">
            Sports
        </div>
        <div class="subject" draggable="true">
            Sports
        </div>
        <div class="subject" draggable="true">
            Sports
        </div>
    </div>
    <div id="Physics" class="subjectsParent">
        <div class="subject" draggable="true">
            Physics
        </div>
        <div class="subject" draggable="true">
            Physics
        </div>
        <div class="subject" draggable="true">
            Physics
        </div>
    </div>
</div>

.subject {
    display: block;
    position: absolute;
    background-color: green;
    margin: 5px;
    padding: 5px;
    color: white;
}

.subjectsParent {
    display: inline-block;
    position: relative;
}

（这些分区后面还有2个相同分区）

---

解决方案是给出最后一个子位置的相对位置。无论使用多少个div，这都有效

.subject {
    display: block;
    position: absolute;
    background-color: green;
    margin: 5px;
    padding: 5px;
    color: white;
}
.subject:last-child {
    position: relative;
}

.subjectsParent {
    display: inline-block;
}

---

尝试创建一个你想要的图像表示，我发现很难准确地理解你想要的是什么，你希望它看起来有多准确我添加了图像。为什么你有很多元素？使用每个主题的单一元素是不可能实现的吗？当然。相对于父对象的位置+谢谢你打败我！可以增加div的数量。无需增加div。这不是你想要的解决方案吗？在现实中，我希望它最多32个div。您使用了第一个和第二个孩子。我怎样才能改变它，使它能被更多地使用？让它更具活力？就像JoostS说的那样。。基本上保持所有的孩子绝对，并使第一个或最后一个或任何孩子相对的位置。