html - 将一个 div 框绝对定位在另一个绝对定位的 div 框下，而不知道它的高度

Question

我做了一个网站，我在 div 框中放置了几张图片，并将它们绝对放置在我想要的位置。

.char1 - .char5 已经有了正确的位置。现在我希望 .char6 - .char10 直接对齐 .char1 - .char5。实现这一目标的聪明方法是什么？在我的代码中，它仅在我不更改屏幕尺寸时有效。

我所有的 .char div 几乎都具有相同的值，除了“左”和“顶部”位置。有没有办法缩短它？

非常感谢。

* {
    background-color: #151515;
}

.h {
    align-self: center;
    width: 96%;
    height 100%;
    border-style: solid;
    border-width: 0px;
    border-color: 817B6F;

}
.chars {
    display: flex;
    width: 10%;
    height: auto;
    background-color: 817B6F;
    position: absolute;
    top: 10%;
    left: 25%;
}


    .char1 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 10%;
    height: auto;
    left: 21.5%;
    border-top-left-radius: 5px;
    padding: 0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}
.char2 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 10%;
    height: auto;
    left: 32.9%;
    padding:0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;

}

.char3 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 10%;
    height: auto;
    left: 44.3%;
    padding:0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;

}

.char4 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 10%;
    height: auto;
    left: 55.7%;
    padding:0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}

.char5 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 10%;
    height: auto;
    left: 67.1%;
    padding:0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;
    border-top-right-radius: 5px;
}

.char6 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 33%;
    height: auto;
    left: 21.5%;
    border-bottom-left-radius: 5px;
    padding: 0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}

.char7 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 33%;
    height: auto;
    left: 32.9%;
    padding:0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;

}

.char8 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 33%;
    height: auto;
    left: 44.3%;
    padding:0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;

}

.char9 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 33%;
    height: auto;
    left: 55.7%;
    padding:0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}

.char10 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 33%;
    height: auto;
    left: 67.1%;
    padding:0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;
    border-bottom-right-radius: 5px;
}

<div class="char1">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char2">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char3">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char4">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char5">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char6">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char7">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char8">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char9">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char10">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

Answer 1

使用绝对定位来放置通常不是一个好主意，尤其是在响应式设计中。您最好使用相对或静态(默认)定位并使用边距来实现您想要的结果，因为您的框会在它们出现在 DOM 中时自然流动。

您还应该研究 DRY 原则，如不要重复自己。在您的情况下，您可以对所有框使用相同的类并相应地设置样式。