@mUchenik

Как выровнять Р и h3 и кнопку в блоках?

Друзья, доброго всем дня!!!
Вопрос такой:
Как в блоках, выровнять теги 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

Возможно ли реализовать мою задумку?
  • Вопрос задан
  • 209 просмотров
Решения вопроса 1
Uwe_Boll
@Uwe_Boll
Я Злой и Страшный Уве Болл в Разработке знаю Толк
вот getbootstrap.com
и вот htmlbook.ru
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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