Как сделать так чтобы button находился в конце блока?

Question

У меня есть несколько блоков. С помощью JS я делаю высоту блоков одинаковыми. Я хочу чтобы кнопка ГОЛОСОВАТЬ находилась в конце блока. Как мне это сделать. Заранее спасибо))

<div class="row" >
    
    <div class="col-xs-6 col-sm-2 col-md-2 center">
        <div class="thumbnail search-thumbnail eq1">
            <img src="<?= base_url()?>assets/images/gallery/<?= $value['first_photo'] ?>" >

            <div class="caption">
                <div class="clearfix">
                    <span class="pull-right label label-grey info-label"> Голосов: <?= $value['first_sum'] ?></span>
                </div>

                <h3 class="search-title">
                    <span class="blue"><?= $value['first_name'] ?></span>
                </h3>
                
            </div>
            <div class="center" >
                <a href="<?= base_url() ?>index.php/battle/index/<?= $value['id']?>">
                <button class="btn btn-primary">
                    Голосовать
                </button>
                </a>
            </div>
        </div>
    </div>

    
    <div class="col-xs-6 col-sm-2 col-md-2 center">
        <div class="thumbnail search-thumbnail eq1">
            <img  src="<?= base_url()?>assets/images/gallery/<?= $value['second_photo'] ?>" >

            <div class="caption">
                <div class="clearfix">
                    <span class="pull-right label label-grey info-label"> Голосов: <?= $value['second_sum'] ?></span>
                </div>

                <h3 class="search-title">
                    <span class="blue"><?= $value['second_name'] ?></span>
                </h3>
            </div>
            <div class="center">
                <a href="<?= base_url() ?>index.php/battle/index/<?= $value['id']?>">
                <button class="btn btn-primary">
                    Голосовать
                </button>
                </a>
            </div>
        </div>
    </div>
    

    
</div>

<script type="text/javascript">
    function setEqualHeight(columns)
    {
        var tallestcolumn = 0;
        columns.each(function(){
            currentHeight = $(this).height();
            if(currentHeight > tallestcolumn){
                tallestcolumn = currentHeight;
            }
        });
        columns.height(tallestcolumn);
    }
    $(document).ready(function() {
        setEqualHeight($(".eq1"));
    });
</script>

Answer 1

Можно задать родительскому компоненту flex и сделать направление основной оси в значение столбец и расположить элементы по краям

.parent{
  width: 100px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: tomato;
}

.child{
  width: 100px;
  height: 100px;
  background-color: aqua;
}

Answer 2

Можете задать колонке position: relative, чтобы абсолютно спозиционировать кнопку, я указал свойство bottom со значением 5px, чтобы кнопка размещалась на 5px выше нижнего края колонки, а позицию по центру колонки вы задаете так: calc(50% - половина ширины вашей кнопки)

Если ваша кнопка шириной 50px, то код будет выглядеть так:

.eq1 {
  position: relative;
}

.eq1 .btn {
  position: absolute;
  bottom: 5px;
  right: calc(50%-25px);
}

Position на MDN

БЛОГ НА HUSL

Как сделать так чтобы button находился в конце блока?

Ответы (2 шт):