0

Есть контейнер родитель features в нём заголовок по центру и 4 блока элемента в ряд, как выровнять элементы с помощью флексов, при этом не задавая заголовку display:flex; и чтобы он при этом не прилипал к флекс элементам и имел отступы?

*{
	box-sizing:border-box; 
}
body{
margin: 0;
font-family: Tahoma;
color: #000000;	
}
/*Header.book*/
.book{
padding-top: 77px;
padding-bottom: 96px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
}

.book-img{
margin-right: 75px;
}
.book-text{

}
.book-title {}
.book-subtitle{}
.book-descr{
	max-width: 530px;
}
.book-price{}
.book-button{}
.book-button-o{}
/*Header.book*/
/*Основное содержание страницы .features*/
.features{
padding-top: 89px;
padding-bottom: 99px;
background-color: #f2f2f2;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;

border:2px solid purple;

}
.features-title{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-ms-align-self: flex-start;
align-self: flex-start;
text-align: center;
border:2px solid purple;

}

.features-block{
border:2px solid purple;
	

}
.features-img {
min-height: 55px;
border:2px solid purple;

}
.features-text{
border:2px solid purple;
	
}
/*Основное содержание страницы .features*/
/*Footer .comments*/
.comments{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
-ms-align-items: center;
align-items: center;
}
.comments-title{
text-align: center;
}
.comments-people{
padding-top: 89px;
padding-bottom: 111px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;

}
/*Footer .comments*/
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
		<title>Истинная королева-Екатерина Арагонская</title>
        <link rel="stylesheet" href="сss/reset.css">
        <link rel="stylesheet" href="сss/style.css">
        
</head>
<body>
	<header class="book">
		<div class="book-img">
			<img src="img/header-img.png" alt="header-img">
		</div>
		<!-- /.book-img -->
		<div class="book-text">
			<h1 class="book-title">Истинная королева</h1>
			<!-- /.book-title -->
			<h2 class="book-subtitle">Екатерина Арагонская</h2>
			<!-- /.book-subtitle -->
			<p class="book-descr">«Екатерина Арагонская» — это первый роман популярного автора и известного историка Элисон Уэйр, решившей создать драматическую серию, в которой каждая книга будет посвящена одной из жен короля Генриха VIII.</p>
			<!-- /.book-descr -->
			<div class="book-price">399 р.</div>
			<!-- /.book-price -->
			<button class="book-button">Купить</button>
			<!-- /.book-button -->
			<button class="book-button book-button-o">Узнать подробнее</button>
			<!-- /.book-button-o -->
		</div>
		<!-- /.book-text -->
	</header>
	<!-- /.header -->
	<section class="features">
		<div class="features-title">
			<h2>Доставка и оплата</h2>
		</div>
		<!-- /.features-title -->
		
		<div class="features-block">
			<img src="img/features/credit_card.png" alt="credit_card" class="features-img">
			<!-- /.features-img -->
			<div class="features-text">Бесплатная доставка <br> 
381 магазин в сети</div>
			<!-- /.features-text -->
		</div>
		<!-- /.features-block -->

		<div class="features-block">
			<img src="img/features/shopping_cart.png" alt="shopping_cart" class="features-img">
			<!-- /.features-img -->
			<div class="features-text">Оплата онлайн или <br> наличными при получении</div>
			<!-- /.features-text -->
		</div>
		<!-- /.features-block -->

		<div class="features-block">
			<img src="img/features/shipped.png" alt="shipped" class="features-img">
			<!-- /.features-img -->
			<div class="features-text">Курьерская доставка: <br> 
от 2000 р. – бесплатно</div>
			<!-- /.features-text -->
		</div>
		<!-- /.features-block -->

		<div class="features-block">
			<img src="img/features/mailbox.png" alt="mailbox" class="features-img">
			<!-- /.features-img -->
			<div class="features-text">Почтой России – <br>
в любую точку страны</div>
			<!-- /.features-text -->
		</div>
		<!-- /.features-block -->
		
	</section>
	<!-- /.features -->
	<footer class="comments">
		<div class="comments-title">
			<h2>Кто уже купил эту книгу</h2>
		</div>
		<!-- /.comments-title -->
		<div class="comments-people">
			<img src="img/people/people_1.png" alt="people_1">
			<img src="img/people/people_5.png" alt="people_5">
		</div>
        <!-- /.comments-people -->
        <div class="comments-people">
			<img src="img/people/people_2.png" alt="people_2">
			<img src="img/people/people_6.png" alt="people_6">
		</div>
        <!-- /.comments-people -->
        <div class="comments-people">
			<img src="img/people/people_3.png" alt="people_3">
			<img src="img/people/people_7.png" alt="people_7">
		</div>
        <!-- /.comments-people -->
        <div class="comments-people">
			<img src="img/people/people_4.png" alt="people_4">
			<img src="img/people/people_8.png" alt="people_8">
		</div>
        <!-- /.comments-people -->
	</footer>
	<!-- /.comments -->
</body>
</html>

макет

2 ответа 2

0

*{
	box-sizing:border-box; 
}
body{
margin: 0;
font-family: Tahoma;
color: #000000;	
}
/*Header.book*/
.book{
padding-top: 77px;
padding-bottom: 96px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
}

.book-img{
margin-right: 75px;
}
.book-text{

}
.book-title {}
.book-subtitle{}
.book-descr{
	max-width: 530px;
}
.book-price{}
.book-button{}
.book-button-o{}
/*Header.book*/
/*Основное содержание страницы .features*/
.features{
padding-top: 89px;
padding-bottom: 99px;
background-color: #f2f2f2;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-wrap: wrap;
justify-content: center;

border:2px solid purple;

}
.features-title{
flex-basis: 100%;
text-align: center;
border:2px solid purple;

}

.features-block{
border:2px solid purple;
text-align: center;
flex: 1;
	

}
.features-img {
min-height: 55px;
border:2px solid purple;

}
.features-text{
border:2px solid purple;
	
}
/*Основное содержание страницы .features*/
/*Footer .comments*/
.comments{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
-ms-align-items: center;
align-items: center;
}
.comments-title{
text-align: center;
flex-basis: 100%;
}
.comments-people{
padding-top: 89px;
padding-bottom: 111px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;

}
/*Footer .comments*/
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
		<title>Истинная королева-Екатерина Арагонская</title>
        <link rel="stylesheet" href="сss/reset.css">
        <link rel="stylesheet" href="сss/style.css">
        
</head>
<body>
	<header class="book">
		<div class="book-img">
			<img src="img/header-img.png" alt="header-img">
		</div>
		<!-- /.book-img -->
		<div class="book-text">
			<h1 class="book-title">Истинная королева</h1>
			<!-- /.book-title -->
			<h2 class="book-subtitle">Екатерина Арагонская</h2>
			<!-- /.book-subtitle -->
			<p class="book-descr">«Екатерина Арагонская» — это первый роман популярного автора и известного историка Элисон Уэйр, решившей создать драматическую серию, в которой каждая книга будет посвящена одной из жен короля Генриха VIII.</p>
			<!-- /.book-descr -->
			<div class="book-price">399 р.</div>
			<!-- /.book-price -->
			<button class="book-button">Купить</button>
			<!-- /.book-button -->
			<button class="book-button book-button-o">Узнать подробнее</button>
			<!-- /.book-button-o -->
		</div>
		<!-- /.book-text -->
	</header>
	<!-- /.header -->
	<section class="features">
		<div class="features-title">
			<h2>Доставка и оплата</h2>
		</div>
		<!-- /.features-title -->
		
		<div class="features-block">
			<img src="img/features/credit_card.png" alt="credit_card" class="features-img">
			<!-- /.features-img -->
			<div class="features-text">Бесплатная доставка <br> 
381 магазин в сети</div>
			<!-- /.features-text -->
		</div>
		<!-- /.features-block -->

		<div class="features-block">
			<img src="img/features/shopping_cart.png" alt="shopping_cart" class="features-img">
			<!-- /.features-img -->
			<div class="features-text">Оплата онлайн или <br> наличными при получении</div>
			<!-- /.features-text -->
		</div>
		<!-- /.features-block -->

		<div class="features-block">
			<img src="img/features/shipped.png" alt="shipped" class="features-img">
			<!-- /.features-img -->
			<div class="features-text">Курьерская доставка: <br> 
от 2000 р. – бесплатно</div>
			<!-- /.features-text -->
		</div>
		<!-- /.features-block -->

		<div class="features-block">
			<img src="img/features/mailbox.png" alt="mailbox" class="features-img">
			<!-- /.features-img -->
			<div class="features-text">Почтой России – <br>
в любую точку страны</div>
			<!-- /.features-text -->
		</div>
		<!-- /.features-block -->
		
	</section>
	<!-- /.features -->
	<footer class="comments">
		<div class="comments-title">
			<h2>Кто уже купил эту книгу</h2>
		</div>
		<!-- /.comments-title -->
		<div class="comments-people">
			<img src="img/people/people_1.png" alt="people_1">
			<img src="img/people/people_5.png" alt="people_5">
		</div>
        <!-- /.comments-people -->
        <div class="comments-people">
			<img src="img/people/people_2.png" alt="people_2">
			<img src="img/people/people_6.png" alt="people_6">
		</div>
        <!-- /.comments-people -->
        <div class="comments-people">
			<img src="img/people/people_3.png" alt="people_3">
			<img src="img/people/people_7.png" alt="people_7">
		</div>
        <!-- /.comments-people -->
        <div class="comments-people">
			<img src="img/people/people_4.png" alt="people_4">
			<img src="img/people/people_8.png" alt="people_8">
		</div>
        <!-- /.comments-people -->
	</footer>
	<!-- /.comments -->
</body>
</html>

0

Оберните .features-block в отдельный div.features-blocks, например. Заголовок будет подчиняться своим стилям

1
  • благодарю за ответ)
    – илья
    4 мар 2020 в 11:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.