0
0

Если в ДИВе с описанием фильма мало текста, то отзывы неправильно отображаются. Если текст добавить, что все как в уроке.

Скриншот

Кусок кода со страницы:

<div class="infofilmpage">
					<span class="label">Рейтинг: <span class="value">8.1 / 10</span></span>
					<span class="label">Год: <span class="value">2014</span></span>
					<span class="label">Режиссер: <span class="value">Кристофер Нолан</span></span>
				</div>

				<hr>

				<h2>Описание</h2>
				<div class="description_film">
					<img src="assets/img/inter.png">
					бла-бла-бла, очень мнооога буков в этом ДИВе
				</div>

				<hr>

				<h2>Комментарии</h2>
				<div class="reviews">

					<div class="review_name">
						Сергей
					</div>
					<div class="review_text">
						Норм, но долго
					</div>

				</div>	

			</div>
		</div>

Стили:

.infofilmpage {
	margin-top: 2%;
	margin-bottom: 4%;
}

.infofilmpage .label {
	font-size: 1.2em;
}

.infofilmpage .value {
	font-size: 1em;
	color: #49945a;
	margin-right: 3%;
}

.description_film {
	margin-bottom: 15%;
}

.description_film img {
	float: left;
	margin-right: 2%;
	border-radius: 5px;
	border: solid 5px #dad7d5;
}

.reviews {
	margin-bottom: 4%;
	font-size: 0.9em;
}

.reviews .review_name {
	background-color: #7268ad;
	color: white;
	padding: 1%;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.reviews .review_text {
	padding-top: 2%;
	padding-bottom: 2%;
	padding-left: 2%;
}

Николай
4 years ago






Объект-картинка img в блоке имеет свойство float и поэтому не влияет на высоту родительского блока-контейнера - т.е. блока <div class="description_film">

Чтоб решить вопрос добавьте в свойства

.description_film {
margin-bottom: 15%;
overflow: auto;
}

Вадим Семенов
4 years ago

Один ответ