Как мне избавиться от этого пробела?

Я создаю 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 -->

источник

2016-05-22 Jack Man

Прежде чем я начну, я заметил, что все ваши student-rating дивы имеют одинаковое значение идентификатора. Обратите внимание, что это недопустимый HTML, поскольку у вас не должно быть нескольких элементов на странице с тем же идентификатором. Вы должны использовать class="student-rating" вместо id=. Для остальной части этого ответа я предполагаю, что вы это сделали. Обратите внимание, что мой код ниже будет работать, только если вы это сделаете.

Основная проблема, с которой вы столкнулись, связана с позиционированием всех элементов в обзоре div с отрицательным top.

Несмотря на то, что у вас все они расположены относительно друг относительно друга, фактический student-rating div заканчивается большим зазором внизу, который не может быть легко закрыт.

У вас также есть дополнительный зазор, вызванный margin-bottom:10px, что делает пространство еще большим.

Существует быстрый и грязный способ решить эту проблему. Существует также более сложное решение, которое в конечном итоге улучшит ваш код.

Во-первых, быстрое решение:

Во-первых, переместить «больше» Show элемент вне course-reviews элемента, так что ниже код влияет на последний обзор, а не показать еще кнопку. Затем добавьте следующий код:

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

Это перекрывает нижнюю границу на последнем обзоре, и должны закрыть разрыв красиво. Не стесняйтесь настраивать точное значение, если вам нужно, но -15px смотрит прямо на меня.

Это решение довольно «хакерское»; это не хороший код, но он работает с тем, что у вас есть. Лучшим решением, ниже, было бы исправить существующий код, чтобы взломать это не нужно.

Как вы это делаете? Ну, слишком долго оправдывать ответ здесь, но, короче говоря, вам нужно избавиться от всех отрицательных значений top, которые вы получили в CSS для элементов в пределах student-rating. Начните с самого большого и установите его на ноль, а затем настройте остальные на ту же сумму. Макет должен оставаться тем же визуально для блока оценки, но он должен облегчить правильное позиционирование. Я также заметил, что у вас есть и отрицательные значения left. Вероятно, их тоже удалят, пока вы на нем.

Я предполагаю, что вы добавили отрицательные значения верхнего и левого уровней, чтобы компенсировать другие сбои компоновки, поэтому их, вероятно, также придется решить, как только вы это сделаете. Но на этот раз без использования отрицательного позиционирования!

источник

2016-05-22 19:22:06 Spudley

Как мне избавиться от этого пробела?

ответ

Смежные вопросы