Подскажите пожалуйста, где ошибка в коде? Надо чтобы было как на картинке, но в браузере блок с ценой расположен под блоком с информацией.
.wrapper{
max-width: 1250px;
width: 100%;
margin: 0 auto;
padding: 0px 40px;
}
.service-list_item h6{
margin-bottom: 25px;
}
.service-list_item p{
color: #737373;
font-size: 16px;
line-height: 28px;
}
.box-pricing{
display: flex;
}
.box-pricing .service-list_icon{
margin-left: 0;
height: 125px;
width: 125px;
font-size: 32px;
}
.pricing{
display: flex;
text-align: center;
}
.pricing-item{
border: 1px solid #e6e6e6;
}
.pricing-item:first-child{
border-right: none;
}
.pricing-item:last-child{
border-left: none;
}
.pricing-header{
padding: 25px 28px;
}
.pricing-header_title{
color: #0d0d0d;
font-size: 22px;
font-weight: 700;
line-height: 25px;
text-transform: uppercase;
}
.pricing-header_title span::before{
content: '';
display: block;
width: 50px;
height: 2px;
background-color: #f39c12;
}
<div class="box-pricing">
<div class="wrapper">
<div class="service-list_item">
<div class="service-list_icon"><span class="icon-banknote"></span></div>
<h6>Packege Pricing</h6>
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec
sagittis sem nibh id elit. </p>
</div>
<div class="pricing">
<div class="pricing-item">
<div class="pricing-header">
<span class="pricing-header_title">Basic
<span class="">$35</span>
</span>
</div>
<ul class="pricing-list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="pricing-footer"><a href="#" class="btn"></a></div>
</div>
<div class="pricing-item">
<div class="pricing-header">
<span class="pricing-header_title">Gold
<span class="">$99</span>
</span>
</div>
<ul class="pricing-list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="pricing-footer"><a href="#" class="btn"></a></div>
</div>
<div class="pricing-item">
<div class="pricing-header">
<span class="pricing-header_title">Silver
<span class="">$65</span>
</span>
</div>
<ul class="pricing-list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="pricing-footer"><a href="#" class="btn"></a></div>
</div>
</div>
</div>
</div>
Добавь display:flex
к .wrapper.
.wrapper {
display: flex;
max-width: 1250px;
width: 100%;
margin: 0 auto;
padding: 0px 40px;
}
.service-list_item h6 {
margin-bottom: 25px;
}
.service-list_item p {
color: #737373;
font-size: 16px;
line-height: 28px;
}
.box-pricing {
display: flex;
}
.box-pricing .service-list_icon {
margin-left: 0;
height: 125px;
width: 125px;
font-size: 32px;
}
.pricing {
display: flex;
text-align: center;
}
.pricing-item {
display: flex;
align-items: center;
flex-direction: column;
border: 1px solid #e6e6e6;
}
.pricing-item:first-child {
border-right: none;
}
.pricing-item:last-child {
border-left: none;
}
.pricing-header {
padding: 25px 28px;
}
.pricing-header_title {
display: block;
position: relative;
color: #0d0d0d;
font-size: 22px;
font-weight: 700;
line-height: 25px;
text-transform: uppercase;
}
.pricing-header_title span::before {
content: '';
display: block;
width: 50px;
height: 2px;
background-color: #f39c12;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="box-pricing">
<div class="wrapper">
<div class="service-list_item">
<div class="service-list_icon"><span class="icon-banknote"></span></div>
<h6>Packege Pricing</h6>
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. </p>
</div>
<div class="pricing">
<div class="pricing-item">
<div class="pricing-header">
<span class="pricing-header_title">Basic
<span class="">$35</span>
</span>
</div>
<ul class="pricing-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="pricing-footer">
<a href="#" class="btn"></a>
</div>
</div>
<div class="pricing-item">
<div class="pricing-header">
<span class="pricing-header_title">Gold
<span class="">$99</span>
</span>
</div>
<ul class="pricing-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="pricing-footer">
<a href="#" class="btn"></a>
</div>
</div>
<div class="pricing-item">
<div class="pricing-header">
<span class="pricing-header_title">Silver
<span class="pricing-item_price">$65</span>
</span>
</div>
<ul class="pricing-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="pricing-footer">
<a href="#" class="btn"></a>
</div>
</div>
</div>
</div>
</div>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Есть форма отправкиПытаюсь сделать валидацию и иммитацию отправки формы (со страницы не должно перебрасываться, а просто над кнопкой отправить...
Использую node js на сервере (с помощью) PassengerУстановил версию 9
Есть форма с логином и паролемПоле с паролем закрыто и должно открыться после ввода 5 символов в поле с логином, а кнопка входа открыться после...