.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">
всегда находился под блоками, внезависимости от их количества (размер текста в блоках может быть разный.)
как вариант после каждого comment-block ставить
<div class="clear"></div>
где
.clear{
clear: both;
}
Все очень просто, добавь к блоку overflow:auto;
:
.comment-block {
display: block;
width: 1092px;
min-height: 150px;
position: relative;
margin-top: 10px;
overflow: auto;
}
Рекомендую использовать min-height
с overflow:auto
, чтобы скролл не появлялся.
Это решение лучше предыдущего во всех смыслах.
добавил стили
.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>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Верстаю макет, использую bootstrapСтолкнулся с такой проблемой: margin по факту есть и влияет на расположение элементов, но во вкладке computed он не отображается,...
Привет! Кто-нибудь подскажет как мне три столбика преобразовать в два при изменении разрешения экранаИспользуется Bootstrap