正如您在下面看到的,我有三个盒子。您可以看到在方框 1 和方框 3 中一切正常,但在方框 2 中文本内容重叠。
这是因为 <div>
同类.vertical_center.grade_info
有 margin-left
仅 100px
的选项.我不想要这些十字路口。
如何更改 margin-left
单独为所有框以避免此问题?
到目前为止,这是我的代码:
.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%);
}
<div class="three_separation">
<div class='grades_dashboard_box'>
<div class="vertical_center">
<h1 class="grade_display" id="grade_display_best">2.3</h1>
<div class="vertical_center grade_info" style="margin-left: 100px;">
<p style="font-size: 15px;">Beste Durchschnittsnote</p>
<p id="grade_display_best_sub" style="font-size: 20px;">Biologie</p>
</div>
</div>
</div>
<div class='grades_dashboard_box'>
<div class="vertical_center">
<h1 class="grade_display" id="grade_display_average">13.70</h1>
<div class="vertical_center grade_info" style="margin-left: 100px;">
<p style="font-size: 15px;">Durchschnittsnote</p>
</div>
</div>
</div>
<div class='grades_dashboard_box'>
<div class="vertical_center">
<h1 class="grade_display" id="grade_display_worst">3.4</h1>
<div class="vertical_center grade_info" style="margin-left: 100px;">
<p style="font-size: 15px;">Schlechteste Durchschnittsnote</p>
<p id="grade_display_worst_sub" style="font-size: 20px;">Deutsch</p>
</div>
</div>
</div>
</div>
最佳答案
也许你可以使用 flex-box通过如下更新您的 CSS 来实现您需要的一致布局:
.grade_display {
font-size: 60px;
}
/* Add this */
.grades_dashboard_box>div {
/* Use flex box on the first div of .grades_dashboard_box */
display: flex;
/* Cause flex layout axis on this div to be horizontal */
flex-direction: row;
/* Cause children to center vertically */
align-items: center;
}
/* Add this (replaces inline margin-left style) */
.grades_dashboard_box .grade_info {
/* Add space to left of .grade_info */
margin-left: 40px;
/* Limit width to break small text onto two lines */
width: 100px;
}
/* Add this */
.grades_dashboard_box h1 {
/* Replace h1's default margin to enable vertical centering */
margin: 0;
}
.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;
/* Add this */
display: flex;
align-items: center;
}
<!-- remove margin-left:100px throughout -->
<div class="three_separation">
<div class='grades_dashboard_box'>
<div class="vertical_center">
<h1 class="grade_display" id="grade_display_best">2.3</h1>
<div class="vertical_center grade_info">
<p style="font-size: 15px;">Beste Durchschnittsnote</p>
<p id="grade_display_best_sub" style="font-size: 20px;">Biologie</p>
</div>
</div>
</div>
<div class='grades_dashboard_box'>
<div class="vertical_center">
<h1 class="grade_display" id="grade_display_average">13.70</h1>
<div class="vertical_center grade_info">
<p style="font-size: 15px;">Durchschnittsnote</p>
</div>
</div>
</div>
<div class='grades_dashboard_box'>
<div class="vertical_center">
<h1 class="grade_display" id="grade_display_worst">3.4</h1>
<div class="vertical_center grade_info">
<p style="font-size: 15px;">Schlechteste Durchschnittsnote</p>
<p id="grade_display_worst_sub" style="font-size: 20px;">Deutsch</p>
</div>
</div>
</div>
</div>
关于HTML:并排放置 DIV 内容而不重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55461932/