如下所示,我有三个方框.您可以看到在方框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%);}
<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>
最佳答案
通过更新CSS如下,也许可以使用flex-box实现所需的一致布局：
.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>
