Как прижать кнопку к низу внутри блока div?

Question

[Антон Вебсайтовский]

Здравствуйте, чет не могу прижать кнопку внутри div блока, контент разные и блоки растягиваются чтобы ровно и красиво смотрелось, а вот кнопка не прижимается к низу, выходит не совсем красиво.

Вот так выходит.


На скрине видно что последнем блоке контент короче и кнопка выше, выглядит это не красиво, по этому я и хочу прижать кнопки к низу.

Блок:
.crsl-item {
  background: #fff;
}

Кнопка в блоке с эффектом:
.podrob {
  display: block;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #1b1d25;
  font-size: 14px;
  font-weight: 400;
  background: #F7D02F;
  margin: 0 20px 20px 20px;

  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: color 300ms;
  transition: color 300ms;
}
.podrob:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition: 300ms ease-out;
  transition: 300ms ease-out;
}
.podrob:hover:before {
  background: #1b1d25;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.podrob:hover {
  color: #fff;
}

HTML

<div class="crsl-item">

<a href="" title="" class="podrob">Подробнее</a>
</div>

Comments

[Lord_Dantes]

Дайте родителю всего, значение флекс + justify-content: space-beetwen.
И все.

[Антон Вебсайтовский]

slave bb, не хотел применять ! ну да ладно.

[Антон Вебсайтовский]

увы но так не работает ! вставил в кнопку justify-content: space-beetwen

[Lord_Dantes]

Антон Вебсайтовский, да не надо в кнопку. Дайте родителю и у вас все элементы будут типо отдаленные друг от друга по мере блока.

[Антон Вебсайтовский]

slave bb, попробовал и толку нет ! мне просто надо кнопку прижать к низу и все.

[Lord_Dantes]

Антон Вебсайтовский, смотрите щас.

style
   div1
      display:flex
      justify-content: space-beetwen 
      height: 500px

div1
    div2
    knopka

[Антон Вебсайтовский]

slave bb, увы )

[Lord_Dantes]

flex-direction: column

[Антон Вебсайтовский]

slave bb, Так вроде ровно, но с height: 500px, у меня блон не фиксированный. он растягивается.

Answer 1

[Andrew]

.podrob {
  display: block;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #1b1d25;
  font-size: 14px;
  font-weight: 400;
  background: #F7D02F;
  margin: 0 20px; //ТУТ

  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: color 300ms;
  transition: color 300ms;
}

Comments

[Антон Вебсайтовский]

что там? )

[Andrew]

Антон Вебсайтовский, margin уберите нижний

[Антон Вебсайтовский]

Andrew, я вам советую перечитать тему поста.

Answer 2

[nvdfxx]

justify-content: space-between

Comments

[Антон Вебсайтовский]

и что с этим? вставил в кнопку ! а толку.