我正在创建一个div，用户可以在其中留下关于课程的评论。在评论结束时，将会有文字：“显示更多”，加载更多评论。但是，在最后一次审核和“显示更多”文本之间存在此空白区域。 如何摆脱这种情况？
/* font */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* courses.php */
#star_score {
font-size: 20px;
color: #777;
position: relative;
top: -50px;
left: 265px;
}
.Rating2, .Rating3 {
position: relative;
width: 125px;
height: 25px;
top: -41px;
left: 180px;
}
.Rating2 {
top: -24px;
left: 130px;
}
.Rating3 {
width: 75px;
height: 15px;
position: absolute;
top: 70px;
left: -88px;
}
.Rating2 svg, .Rating3 svg {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
top: 0;
}
.Rating2 meter, .Rating3 meter {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #B6C2CC;
}
.Rating2 meter::-moz-meter-bar, .Rating3 meter::-moz-meter-bar {
background: #FF7867;
}
.Rating2 meter::-webkit-meter-optimum-value, .Rating2 meter::-webkit-meter-suboptimum-value, .Rating2 meter::-webkit-meter-even-less-good-value, .Rating3 meter::-webkit-meter-optimum-value, .Rating3 meter::-webkit-meter-suboptimum-value, .Rating3 meter::-webkit-meter-even-less-good-value {
background: #FF7867;
}
/* Reviews */
#course_reviews {
border: 1px solid #DDD;
background: white;
width: 579px;
padding: 15px;
font-family: 'Open Sans', sans-serif;
position: relative;
left: 50px;
top: -20px
}
#review_text {
font-size: 18px;
font-weight: bold;
}
#course_line2 {
width: 610px;
height: 1px;
background: #ddd;
position: relative;
top: -38px;
left: -15px;
}
#student_rating {
position: relative;
left: -15px;
width: 610px;
margin-bottom: 10px;
}
#student_rating_img {
width: 60px;
height: 60px;
border-radius: 50%;
position: relative;
top: -20px;
left: 20px;
}
#student_username {
color: #00698C;
position: relative;
top: -88px;
left: 100px;
width: 490px;
}
#student_date {
font-size: 14px;
color: #999;
}
#student_content {
color: #0E0E0F;
width: 490px;
position: relative;
top: 5px;
}
#show_more {
padding: 10px;
border-top: 1px solid #ddd;
position: relative;
left: -15px;
width: 590px;
cursor: pointer;
}
#show_more:hover {
text-decoration: underline;
}
#show_more_text {
position: relative;
top: 8px;
left: 10px;
}
/* End of Reviews */
/* end of courses.php */<?php
require "connect.php";
?>
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src='main.js'></script>
</head>
<body id='course_body'>
<br> <br> <br>
<!-- Reviews -->
<!-- Top Part -->
<div id='course_reviews'>
<span id='review_text'> 2937 Reviews </span>
<div class="Rating2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>
<meter min="0" max="5" value="4.28"></meter>
</div> <span id='star_score'> 4.7 </span>
<div id='course_line2'></div>
<!-- End of Top Part -->
<!-- Student Part -->
<div id='student_rating'>
<img src='https://cdnil1.fiverrcdn.com/photos/31519238/small/1459227_10151771032542219_1796077253_n.jpg?1461604087' id='student_rating_img'>
<!-- Student Usernames -->
<div id='student_username'> Matthew Malan <span id='student_date'> 1 day ago </span> <br>
<span id='student_content'> Outstanding Experience! </span>
<!-- Student Rating -->
<div class="Rating3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>
<meter min="0" max="5" value="4"></meter>
</div>
<!-- End of Student Rating -->
</div>
<!-- End of Student Usernames & Stars -->
</div>
<!-- End of Student Part -->
<!-- Student Part -->
<div id='student_rating'>
<img src='https://cdnil1.fiverrcdn.com/photos/31519238/small/1459227_10151771032542219_1796077253_n.jpg?1461604087' id='student_rating_img'>
<!-- Student Usernames -->
<div id='student_username'> Matthew Malan <span id='student_date'> 1 day ago </span> <br>
<span id='student_content'> Outstanding Experience! </span>
<!-- Student Rating -->
<div class="Rating3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>
<meter min="0" max="5" value="4"></meter>
</div>
<!-- End of Student Rating -->
</div>
<!-- End of Student Usernames & Stars -->
</div>
<!-- End of Student Part -->
<!-- Student Part -->
<div id='student_rating'>
<img src='https://cdnil1.fiverrcdn.com/photos/31519238/small/1459227_10151771032542219_1796077253_n.jpg?1461604087' id='student_rating_img'>
<!-- Student Usernames -->
<div id='student_username'> Matthew Malan <span id='student_date'> 1 day ago </span> <br>
<span id='student_content'> Outstanding Experience! </span>
<!-- Student Rating -->
<div class="Rating3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>
<meter min="0" max="5" value="4"></meter>
</div>
<!-- End of Student Rating -->
</div>
<!-- End of Student Usernames & Stars -->
</div>
<!-- End of Student Part -->
<!-- Show More -->
<div id='show_more'> <span id='show_more_text'> Show More </span> </div>
<!-- End of Show More -->
</div>
<!-- End of Reviews -->
答案 0 :(得分：1)
在开始之前，我注意到您的所有student-rating div都具有相同的ID值。请注意，这是无效的HTML，因为您不应该在具有相同ID的页面上拥有多个元素。您应该使用class="student-rating"代替id=。对于本答复的其余部分，我假设您已完成此操作。请注意，我的代码仅在您执行此操作时才有效。
您遇到的主要问题是您将评论div中的所有元素定位为否定top。
虽然你已经将它们相对于彼此定位得很好，但是实际的student-rating div最终会在底部留下很大的间隙，而这种间隙很容易被关闭。
margin-bottom:10px还会造成额外的差距，这会使空白区域更大。
有一种快速而肮脏的方法可以解决这个问题，还有一个更困难的解决方案，最终会使您的代码整体更好。
首先，快速解决方案：
首先，移动“显示更多”＆＃39; course-reviews元素之外的元素，以便下面的代码影响上次审核，而不是显示更多按钮。然后，添加以下代码：
.student-rating:last-of-type {
margin-botton:-15px;
}
这将覆盖上次评论的下边距，并且应该很好地弥补差距。如果需要，可以随意调整精确值，但-15px看起来对我来说是正确的。
这个解决方案非常糟糕＆＃39 ;;它不是很好的代码，但它适用于你所拥有的。下面更好的解决方案是修复现有代码，这样就不需要这样的黑客了。
你是怎么做到的？好吧，在这里提出答案的时间太长了，但简而言之，你需要摆脱你在CSS中为top中所有元素带来的负面student-rating值。 {1}}。从最大的一个开始并将其设置为零，然后以相同的数量调整其他的。对于评级块，布局应该在视觉上保持不变，但是应该使其更容易正确定位。我注意到你也有一些负left值。那些应该被删除的同时你也可以去除它。
我的猜测是你已经添加了负值的顶部和左侧值以补偿其他布局故障，因此一旦你完成了这些，可能还需要解决这些问题。但这次没有使用负面定位！