0
私は、ユーザーがクラスについてのレビューを残すことができる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 -->