Друзья, доброго всем дня!!!
Вопрос такой:
Как в блоках, выровнять теги h3, p и кнопку.
Дело в том, что когда я ввожу h3 и Р в разных блоках из-за разного колличества символов в блоке, съезжает кнопка и получается она на разных уровнях...
Как мне сделать, что бы Все блоки смотрелись семмитрично и кнопки не съезжали?
Вот участок html:
<div class="row">
<div class="col-lg-3">
<div>
<div class="items">
<div class="item item_1">
<div class="row">
<div class="col-lg-12">
<div class="zag">
<h3>Вариант 1</h3>
</div>
</div>
</div>
<p>Тут кнопка высоко"</p>
<div class="sbottons">
<a href="#callback" class="sbuttons">Как выровнять</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="items">
<div class="item item_2">
<div class="row">
<div class="col-lg-12">
<div class="zag">
<h3>Вариант 2 для сравнения</h3>
</div>
</div>
</div>
<p>Тут из-за большего колличества знаков кнопка съезжает"</p>
<div class="sbottons">
<a href="#callback" class="sbuttons">Заказать консультацию</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="items">
<div class="item item_3">
<h3>Хтелось бы что бы</h3>
<p>сохранялся один уровень</p>
<div class="sbottons">
<a href="#callback" class="sbuttons">Кнопка</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="items">
<div class="item item_4">
<h3>И все кнопки</h3>
<p>были на одном уровне, но с учетом условий адаптивности.</p>
<div class="sbottons">
<a href="#callback" class="sbuttons">Кнопка жми</a>
</div>
</div>
</div>
</div>
</div>
Вот участок кода SASS блоков:
#lp-offer
margin-bottom: em(65px)
margin-top: em(55px)
// .col-lg-3
// min-height: em(15px)
.items
max-width: 1000px
margin: 0px auto 0
.item
float: left
background-color: #fff
width: 100%
height: em(400px)
box-shadow: 0 0 19px rgba(10, 10, 10, 1)
position: relative
padding: 70px 10px 10px
margin: 1%
text-align: center
box-sizing: border-box
outline: 2px solid #32d3ff
outline-offset: -7px
h3
color: #000
text-align: center
.sbottons
display: none
background-color: #F39F18
border: 0
padding: 5px
font-size: em(18px)
font-family: sans-serif
a
color: #000
text-decoration: none
box-shadow: 0 3px 0 #B97200
border-radius: 10px
margin: em(16px)
transition: all .5s ease
&:after
content: ''
position: absolute
top: 20px
left: 0
right: 0
margin: auto
width: 46px
height: 46px
background: url(http://www.sgs66.ru/img/ico-lp-offer-46px.png) no-repeat
&_1
&:after
background-position: 0 0
&:hover
background: url(../img/team/rain.jpg) no-repeat
background-size: 100%
&:after
background-position: right 0
&_2
&:after
background-position: 0 -46px
&:hover
background: url(../img/team/rain.jpg) no-repeat
background-size: 100%
&:after
background-position: right -46px
&_3
&:after
background-position: 0 -92px
&:hover
background: url(http://www.sgs66.ru/img/raboti/montaj-rab.jpg) no-repeat
background-size: 100%
&:after
background-position: right -92px
&_4
&:after
background-position: 0 -138px
&:hover
background: url(http://www.sgs66.ru/img/raboti/montaj-rab.jpg) no-repeat
background-size: 100%
&:after
background-position: right -138px
&:hover
color: #fff
h3
color: #fff
.sbottons
display: inline-block
& a:hover, &:focus
color: #fff
text-decoration: none
&:hover
background-color: #F3B046
&:active
background-color: #986107
transform: translateY(4px)
&:before
// outline-color: #fff
background-color: #394b5f
opacity: 0.85px
Возможно ли реализовать мою задумку?
Простой
Простой
