如下所示,我有三個方框.您可以看到在方框1和3中一切正常,但是在方框2中,文本內容重疊.

這是因為< div>類別為.vertical_center.grade_info的對象,其margin-left選項僅適用于100px.我不要這些路口.

如何單獨更改所有包裝盒的左邊距以避免出現此問題？

到目前為止,這是我的代碼：

.three_separation {

width: 100%;

display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-gap: 60px;

}

.grades_dashboard_Box {

height: 130px;

width: 320px;

background-color: #0d0d0d;

color: #ffffff;

margin: 0 auto;

position: relative;

}

.grade_display {

float: left;

font-size: 60px;

}

.vertical_center {

margin: 0;

position: absolute;

top: 50%;

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

2.3

Beste Durchschnittsnote

Biologie

13.70

Durchschnittsnote

3.4

Schlechteste Durchschnittsnote

Deutsch

總結

以上是生活随笔為你收集整理的html内容显示重叠了,HTML：将DIV内容并排放置而不重叠的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。