HTML：并排放置 DIV 内容而不重叠

Question

As you can see below, I have three boxes.正如你在下面看到的，我有三个盒子。 You can see that in box 1 and 3 everything works great, but in box 2 the text content is overlapping.您可以看到在框 1 和 3 中一切正常，但在框 2 中文本内容重叠。

This is because of the <div> with the class .vertical_center.grade_info has the margin-left option for only 100px .这是因为带有.vertical_center.grade_info类的<div>只有100px的margin-left选项。 I don't want these intersections.我不想要这些交叉点。

How do I change margin-left for all boxes individually to avoid this problem?如何单独更改所有框的margin-left以避免此问题？

Here are my code so far:到目前为止，这是我的代码：

 .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>

Answer 1

Perhaps you could use flex-box to achieve the consistent layout that you require, by updating your CSS as follows: 也许您可以使用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>

Answer 2

Similar code with reduced css dependency with grid which scales dynamically 类似的代码与网格的css依赖性降低，动态扩展

  <!DOCTYPE html> <html> <head> <style> body{ display: grid; grid-template-columns: repeat(3,1fr); } div{ height:100px; width:200px; background-color:black; color:white; display: flex; align-items: center; } h1{ margin-right: 10px; } </style> </head> <body> <div> <h1>12.23</h1> <span> <p>lorem ipsum</p> <h3>ssc</h3> </span> </div> <div> <h1>12.23</h1> <span> <p>lorem ipsum test</p> </span> </div> <div> <h1>12.23</h1> <span> <h3>ssc</h3> </span> </div> </body> </html>

HTML：并排放置 DIV 内容而不重叠

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-04-01 19:17:04

解决方案2
0 2019-04-01 20:01:08

HTML：并排放置 DIV 内容而不重叠

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-04-01 19:17:04

解决方案2 0 2019-04-01 20:01:08

解决方案1
2 已采纳 2019-04-01 19:17:04

解决方案2
0 2019-04-01 20:01:08