Как прижать кнопку к низу блока div?
У меня есть вот такой вот код 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> |
<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; } |
.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; }
И выглядит это, вот так:
Вопрос:
Как сделать так что-бы эта кнопка была внизу блока? Всегда, независимо от размера этого блока.
Я понимаю что вопрос возможно простой, но я не смог найти решения. Всё что я находил, либо не работало, либо работало не правильно
Дополнительно:
блоку дайте position relative
кнопке position absolute bottom напр. 20 px
Кнопке margin-top: auto
Для такого варианта не нужны лишние обертки, как в варианте со space-between.
Можно гридами.
Только, пожалуйста, не абсолютом.
<div class="buy_card"> <div> <h1>До конца акции: </h1> <p id="tr_time"></p> </div> <button>Купить</button> </div> |
<div class="buy_card"> <div> <h1>До конца акции: </h1> <p id="tr_time"></p> </div> <button>Купить</button> </div>
.buy_card { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } |
.buy_card { display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
- Спасибо!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы прижать кнопку к низу блока div, можно использовать CSS свойство `position: absolute` в сочетании с `bottom: 0`. Вот пример кода для этой задачи:
```html
Содержимое блока
```
```css
.container {
position: relative;
height: 200px; /* задаем высоту блока */
}
button {
position: absolute;
bottom: 0;
}
```
В данном примере мы задаем родительскому блоку `.container` свойство `position: relative`, чтобы кнопка позиционировалась относительно этого блока. Затем для кнопки мы задаем `position: absolute` и `bottom: 0`, чтобы кнопка прижалась к нижней части блока.
Если вы хотите, чтобы кнопка оставалась прижатой к низу даже при изменении размеров блока, рекомендуется использовать также `width: 100%` для кнопки, чтобы она занимала всю ширину блока.
Надеюсь, это поможет вам решить вашу проблему с прижатием кнопки к низу блока div. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.