Grade3
@Grade3
Начинающий front-end разработчик

Почему у тега div высоты нету?

Проблема в том что у дива с классом ellipse-group высота ровна 0 но почему? В нём же есть много контента почему его высота не ровно высоте контента внутри него?

<div class="ellipse-group">
				<div class="ellipse">
					<p class="ellipse__text">
						<span class="ellipse__word_bold">5 минут</span> 
						до <br> центра
					</p>
				</div>
				<div class="ellipse">
					<p class="ellipse__text">
						<span class="ellipse__word_bold">300 метров</span> 
						до <br> Волги
					</p>
				</div>
				<div class="ellipse">
					<p class="ellipse__text">
						<span class="ellipse__word_bold">Экологически <br> чистое <br> </span> 
						место
					</p>
				</div>
				<div class="ellipse">
					<p class="ellipse__text">
						<span class="ellipse__word_bold">Бесплатная <br> кладовка <br> </span> 
						в подвале
					</p>
				</div>
				<div class="ellipse">
					<p class="ellipse__text">
						<span class="ellipse__word_bold">Бесплатное <br> парковочное <br> место</span> 
					</p>
				</div>
				<div class="ellipse">
					<p class="ellipse__text">
						<span class="ellipse__word_bold">Бюджетная <br><span class="ellipse__word_small"> отделка под ключ:</span> <br> </span> 
						въехал и живи
					</p>
				</div>
			</div>

.ellipse {
    box-sizing: border-box;
    background: url(../img/section1/ellipse.png) no-repeat;
    width: 153px;
    height: 146px;
    float: left;
    text-align: center;
    padding: 40px 0;
}

.ellipse__text {
    font-size: 17px;
    padding-left: 7px;
}

.ellipse__word_bold {
    font-weight: 700;
}

.ellipse__word_small {
    font-size: 15px;
    font-weight: 700;
}

.ellipse:nth-child(1) {
    margin: 207px 50px 0px 10px;
    padding: 55px 0;
}

.ellipse:nth-child(2) {
    margin-top: 139px;
    margin-right: 45px;
    padding: 55px 0;
}

.ellipse:nth-child(3) {
    margin-top: 87px;
    margin-right: 50px;
}

.ellipse:nth-child(4) {
    margin-top: 87px;
    margin-right: 45px;
}

.ellipse:nth-child(5) {
    margin-top: 139px;
    margin-right: 50px;
}

.ellipse:nth-child(6) {
    margin-top: 207px;
    margin-right: 13px;
}
  • Вопрос задан
  • 162 просмотра
Пригласить эксперта
Ответы на вопрос 3
@spido
overflow: hidden; может помочь?
Ответ написан
@daniziat
.ellipse-group {
overflow: hidden;
}
Ответ написан
Комментировать
sslion
@sslion
В инспекторе кода смотрю какие стили применены к твоему .ellipse-group
Я проверил твою разметку со стилями, всё отображается, высота .ellipse-group 353px
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы