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中时自然流动。

此外，你应该研究干燥原则，就像不要重复自己一样。在您的情况下，您可以相应地为所有框和样式使用相同的类。

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

1 个答案: