Проблема с высотой в блоках

285
10 декабря 2016, 10:35

.news-fullstory-comments { 
  max-width: 1210px; 
  margin: 20px auto; 
 color:#000; 
} 
.comment-text { 
  display: inline-block; 
  width: 922px; 
  min-height: 80px; 
  margin-top: 12px; 
  float: right; 
  position: relative; 
  border: 1px solid #29cbf6; 
  color:#000; 
} 
.row.comment-descr { 
  background: linear-gradient(to top right, #27c9f8, #58ffb9); 
  height: 40px; 
} 
.comment-text .nick { 
  display: inline-block; 
  font-size: 14pt; 
  margin-top: 6px; 
  margin-left: 18px; 
  font-family: ProximaBold; 
  float: left; 
} 
.comment-text .date { 
  display: inline-block; 
  font-size: 14pt; 
  margin-top: 6px; 
  margin-right: 8px; 
  font-family: ProximaRegular; 
  float: right; 
} 
.comment .heart { 
  display: inline-block; 
  font-size: 14pt; 
  margin-top: 6px; 
  margin-right: 8px; 
  float: right; 
} 
.comment-text .likes { 
  display: inline-block; 
  font-size: 16pt; 
  margin-top: 3px; 
  margin-right: 10px; 
  font-family: ProximaBold; 
  float: right; 
} 
.comment-text .message { 
  display: block; 
  font-family: ProximaRegular; 
  font-size: 14pt; 
  width: 903px; 
  min-height: 68px; 
  float: left; 
  color: #fff; 
  text-align: left; 
  padding: 10px; 
} 
.comment-block { 
  display: block; 
  width: 1092px; 
  min-height: 150px; 
  position: relative; 
  margin-top: 10px; 
} 
.comment-input { 
  display: block; 
  width: 100%; 
  height: 300px; 
} 
.comment-input textarea { 
  display: inline-block; 
  width: 876px; 
  height: 90px; 
  border: 2px solid #58ffb9; 
  letter-spacing: 2px; 
  padding: 8px; 
  font-size: 16pt; 
  background: transparent; 
  font-style: italic; 
  color: white; 
  float: left; 
  resize: none; 
} 
.comment-ava-wrapper { 
  display: inline-block; 
  width: 80px; 
  height: 80px; 
  border: 2px solid #58ffb9; 
  position: absolute; 
  border-radius: 50%; 
  float: left; 
  margin-left: -110px; 
} 
.comment-ava-wrapper img { 
  width: 67px; 
  height: 67px; 
  margin: 7px; 
  border-radius: 100%; 
} 
.news-header { 
  display: block; 
  width: 100%; 
  height: 45px; 
  background: linear-gradient(to right, #3bc8ef, #54fcbd); 
  text-align: center; 
  color: black; 
  font-size: 22pt; 
  line-height: 45px; 
}
<div class="news-fullstory-comments"> 
  <div class="comment-block"> 
    <div class="comment-text"> 
      <div class="comment-ava-wrapper"> 
      </div> 
      <div class="row comment-descr"> 
        <span class="nick">12</span> 
        <span class="likes">11</span> 
        <i class="fa fa-heart heart" aria-hidden="true"></i> 
        <span class="date">111111</span> 
      </div> 
      <div class="row"> 
        <p class="message"> 
          Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс 
        </p> 
      </div> 
    </div> 
  </div> 
  <div class="comment-block"> 
    <div class="comment-text"> 
      <div class="comment-ava-wrapper"> 
      </div> 
      <div class="row comment-descr"> 
        <span class="nick">1111</span> 
        <span class="likes">1126</span> 
        <i class="fa fa-heart heart" aria-hidden="true"></i> 
        <span class="date">1512</span> 
      </div> 
      <div class="row"> 
        <p class="message"> 
          Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс 
          Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс 
        </p> 
      </div> 
    </div> 
  </div> 
 
</div> 
 
<div class="news-header"> 
  <span>text</span> 
</div>

Собственно проблема - как сделать так чтобы высота у "<div class="comment-block">" менялась от кол-ва текста. Тоесть - чтобы <div class="news-header"> всегда находился под блоками, внезависимости от их количества (размер текста в блоках может быть разный.)

Answer 1

как вариант после каждого comment-block ставить

<div class="clear"></div>

где

.clear{
    clear: both;
} 
Answer 2

Все очень просто, добавь к блоку overflow:auto;:

.comment-block {
  display: block;
  width: 1092px;
  min-height: 150px;
  position: relative;
  margin-top: 10px;
  overflow: auto;
}

Рекомендую использовать min-height с overflow:auto, чтобы скролл не появлялся.

Это решение лучше предыдущего во всех смыслах.

Answer 3

добавил стили

.comment-block:after,.comment-block:before{
  clear:both;
  content: " ";
  display:table;
}

и работает.

.news-fullstory-comments { 
  max-width: 1210px; 
  margin: 20px auto; 
 color:#000; 
} 
.comment-text { 
  display: inline-block; 
  width: 922px; 
  min-height: 80px; 
  margin-top: 12px; 
  float: right; 
  position: relative; 
  border: 1px solid #29cbf6; 
  color:#000; 
} 
.row.comment-descr { 
  background: linear-gradient(to top right, #27c9f8, #58ffb9); 
  height: 40px; 
} 
.comment-text .nick { 
  display: inline-block; 
  font-size: 14pt; 
  margin-top: 6px; 
  margin-left: 18px; 
  font-family: ProximaBold; 
  float: left; 
} 
.comment-text .date { 
  display: inline-block; 
  font-size: 14pt; 
  margin-top: 6px; 
  margin-right: 8px; 
  font-family: ProximaRegular; 
  float: right; 
} 
.comment .heart { 
  display: inline-block; 
  font-size: 14pt; 
  margin-top: 6px; 
  margin-right: 8px; 
  float: right; 
} 
.comment-text .likes { 
  display: inline-block; 
  font-size: 16pt; 
  margin-top: 3px; 
  margin-right: 10px; 
  font-family: ProximaBold; 
  float: right; 
} 
.comment-text .message { 
  display: block; 
  font-family: ProximaRegular; 
  font-size: 14pt; 
  width: 903px; 
  min-height: 68px; 
  float: left; 
  color: #fff; 
  text-align: left; 
  padding: 10px; 
} 
.comment-block { 
  display: block; 
  width: 1092px; 
  min-height: 150px; 
  position: relative; 
  margin-top: 10px; 
} 
.comment-input { 
  display: block; 
  width: 100%; 
  height: 300px; 
} 
.comment-input textarea { 
  display: inline-block; 
  width: 876px; 
  height: 90px; 
  border: 2px solid #58ffb9; 
  letter-spacing: 2px; 
  padding: 8px; 
  font-size: 16pt; 
  background: transparent; 
  font-style: italic; 
  color: white; 
  float: left; 
  resize: none; 
} 
.comment-ava-wrapper { 
  display: inline-block; 
  width: 80px; 
  height: 80px; 
  border: 2px solid #58ffb9; 
  position: absolute; 
  border-radius: 50%; 
  float: left; 
  margin-left: -110px; 
} 
.comment-ava-wrapper img { 
  width: 67px; 
  height: 67px; 
  margin: 7px; 
  border-radius: 100%; 
} 
.news-header { 
  display: block; 
  width: 100%; 
  height: 45px; 
  background: linear-gradient(to right, #3bc8ef, #54fcbd); 
  text-align: center; 
  color: black; 
  font-size: 22pt; 
  line-height: 45px; 
} 
 
.comment-block:after,.comment-block:before{ 
  clear:both; 
  content: " "; 
  display:table; 
}
<div class="news-fullstory-comments"> 
  <div class="comment-block"> 
    <div class="comment-text"> 
      <div class="comment-ava-wrapper"> 
      </div> 
      <div class="row comment-descr"> 
        <span class="nick">12</span> 
        <span class="likes">11</span> 
        <i class="fa fa-heart heart" aria-hidden="true"></i> 
        <span class="date">111111</span> 
      </div> 
      <div class="row"> 
        <p class="message"> 
          Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс 
        </p> 
      </div> 
    </div> 
  </div> 
  <div class="comment-block"> 
    <div class="comment-text"> 
      <div class="comment-ava-wrapper"> 
      </div> 
      <div class="row comment-descr"> 
        <span class="nick">1111</span> 
        <span class="likes">1126</span> 
        <i class="fa fa-heart heart" aria-hidden="true"></i> 
        <span class="date">1512</span> 
      </div> 
      <div class="row"> 
        <p class="message"> 
          Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс 
          Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс 
        </p> 
      </div> 
    </div> 
  </div> 
 
</div> 
 
<div class="news-header"> 
  <span>text</span> 
</div>

READ ALSO
Проблема с отступами html в Sublime Text 3

Проблема с отступами html в Sublime Text 3

Редактируется html файлик

358
проблема с margin

проблема с margin

Верстаю макет, использую bootstrapСтолкнулся с такой проблемой: margin по факту есть и влияет на расположение элементов, но во вкладке computed он не отображается,...

206
Из трех колонок в две в Bootstrap при media screen

Из трех колонок в две в Bootstrap при media screen

Привет! Кто-нибудь подскажет как мне три столбика преобразовать в два при изменении разрешения экранаИспользуется Bootstrap

230