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

Question

[Viva8888]

Здравствуйте. У меня есть несколько блоков. С помощью 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>

Comments

[v3shin]

Контейнеру карточек задайте display: grid, чтобы они сравнялись по высоте. Контент карточек без кнопки загоните в тег, самой карточке укажите display: flex со space-between. Про grid и flex почитайте в интернете.

Answer 1

[Капитан Какао]

1. Родительскому блоку с обводкой делаем position: relative.
2. Кнопке делаем position: absolute и bottom: 0
3. И в родителе делаем нижний отступ под кнопку, что бы если контента будет много он не залазил под кнопку.

Вот пример для наглядности