У меня есть вот такой вот код html, блок div:
<div class="buy_card">
<h1>До конца акции: </h1>
<p id="tr_time"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jun 22, 2023 15:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("tr_time").innerHTML = hours + ' ч, ' + minutes + ' м, ' + seconds + ' с. ';
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("tr_time").innerHTML = "EXPIRED";
}
}, 1000);
</script>
<button>Купить</button>
</div>
И вот такой CSS:
.buy_card {
width: 25%;
background-color: #ACDCFF;
margin: 0 auto;
right: 0;
border-radius: 20px;
font-family: 'Geologica', sans-serif;
font-size: 20px;
padding: 20px;
text-align: center;
}
.buy_card button {
font-family: 'Geologica', sans-serif;
font-size: 17px;
background-color: rgb(0, 0, 0);
color: white;
width: 70%;
padding: 10px;
border-radius: 15px;
border: 0;
cursor: pointer;
}
И выглядит это, вот так:
Вопрос:
Как сделать так что-бы эта кнопка была внизу блока? Всегда, независимо от размера этого блока.
Я понимаю что вопрос возможно простой, но я не смог найти решения. Всё что я находил, либо не работало, либо работало не правильно
