Wie entferne ich diesen Leerraum?

Ich erstelle ein Div, wo Benutzer eine Bewertung über eine Klasse hinterlassen können. Am Ende der Bewertungen wird es einen Text geben: "Mehr anzeigen", der mehr Rezensionen lädt. Zwischen der allerletzten Bewertung und dem Text "Mehr anzeigen" befindet sich jedoch ein weißer Bereich. Wie werde ich das los?Wie entferne ich diesen Leerraum?

/* 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 -->

Quelle

2016-05-22 Jack Man

Bevor ich beginne, merke ich, dass alle Ihre student-rating divs den gleichen ID-Wert hat. Bitte beachten Sie, dass dies ein ungültiger HTML-Code ist, da Sie nicht mehrere Elemente auf einer Seite mit derselben ID haben sollten. Sie sollten class="student-rating" anstelle von id= verwenden. Für den Rest dieser Antwort werde ich davon ausgehen, dass Sie das getan haben. Beachten Sie, dass mein Code unten nur funktioniert, wenn Sie dies tun.

Das Hauptproblem, das Sie haben, wird verursacht, indem Sie alle Elemente innerhalb der Überprüfung div mit einem negativen top positionieren.

Obwohl Sie sie alle gut relativ zueinander positioniert haben, endet die eigentliche student-rating div mit einer großen Lücke an der Unterseite, die nicht leicht geschlossen werden kann.

Sie haben auch eine zusätzliche Lücke verursacht durch margin-bottom:10px, die den Leerraum noch größer macht.

Es gibt einen schnellen und schmutzigen Weg, um dies zu lösen, Es gibt auch eine schwierigere Lösung, die am Ende mit Ihrem Code wird insgesamt besser.

Erstens, die schnelle Lösung:

Zum einen bewegen, um den ‚Zeige mehr‘ Element außerhalb des course-reviews Element, so dass der Code unter der letzten Überprüfung betrifft, und nicht die Show mehr Taste. Fügen Sie dann den folgenden Code hinzu:

.student-rating:last-of-type { 
    margin-botton:-15px; 
}

Dies wird den unteren Rand auf der letzten Überprüfung überschreiben, und sollte die Lücke schön schließen. Fühlen Sie sich frei, den genauen Wert anzupassen, wenn Sie müssen, aber -15px sieht für mich richtig aus.

Diese Lösung ist ziemlich "hacky"; Es ist kein guter Code, aber es funktioniert mit dem, was du hast. Die bessere Lösung, unten, wäre, Ihren vorhandenen Code zu reparieren, so dass ein Hack wie dieser nicht notwendig ist.

Wie machst du das? Nun, es ist zu lang, um hier eine Antwort zu rechtfertigen, aber kurz gesagt, Sie müssen all diese negativen top Werte loswerden, die Sie im CSS für die Elemente innerhalb von student-rating haben. Beginne mit dem größten und setze ihn auf Null, dann stell alle anderen um den gleichen Betrag ein. Das Layout sollte für den Bewertungsblock visuell gleich bleiben, sollte jedoch die korrekte Positionierung erleichtern. Ich bemerke, dass Sie auch einige negative left Werte haben. Diese sollten wahrscheinlich auch entfernt werden, wenn Sie gerade dabei sind.

Meine Vermutung ist, dass Sie die negativen oberen und linken Werte hinzugefügt haben, um andere Layoutfehler auszugleichen, so dass diese wahrscheinlich auch gelöst werden müssen, sobald Sie das getan haben. Aber diesmal ohne negative Positionierung!

Quelle

2016-05-22 19:22:06 Spudley

Antwort

Verwandte Themen