Кнопка выравнивания в нижней части div с помощью CSS

Question

Кнопка выравнивания в нижней части div с помощью CSS

Я хочу выровнять мою кнопку в правом нижнем углу моего div. Как я могу это сделать?

enter image description here

текущий css div:

    float: right;

    width: 83%;

    margin-right: 0px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    height:625px;

    overflow:auto;

765 4

css button alignment

4 ответов:

Comments

Ничего не найдено.

Kokos · Accepted Answer · 2015-04-16 09:35:05

можно использовать position:absolute; для абсолютного позиционирования элемента в Родительском div. При использовании position:absolute; элемент будет располагаться абсолютно от первого расположенного родительского div, если он не может найти его, он будет располагаться абсолютно из окна, поэтому вам нужно будет убедиться, что содержимое div расположено.

чтобы сделать содержимое div позиционируется, все position значения, которые не являются статическими будет работать, но relative это самый простой, так как он не меняет позиционирование divs себя.

добавьте position:relative; к содержимому div удалите поплавок из кнопки и добавьте к кнопке следующий css:
position: absolute;
right:    0;
bottom:   0;

Mohammad Usman · Accepted Answer · 2017-09-29 02:32:37

CSS3 flexbox также может быть использован для выравнивания кнопки в нижней части родительского элемента.

требуется HTML:

<div class="container">
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

необходимый CSS:

.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}

скриншоты:

Полезные Ресурсы:

* {box-sizing: border-box;}
body {
  background: linear-gradient(orange, yellow);
  font: 14px/18px Arial, sans-serif;
  margin: 0;
}
.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
  padding: 10px;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}
.container .btn-holder button {
  padding: 10px 25px;
  background: blue;
  font-size: 16px;
  border: none;
  color: #fff;
}

<div class="container">
  <p>Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... </p>
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

Aron · Accepted Answer · 2014-01-04 22:10:53

родительский контейнер должен иметь этот:
position: relative;
сама кнопка должна иметь это:
position: relative;
bottom: 20px;
right: 20px;
или все, что вам нравится

BehranG BinA · Accepted Answer · 2017-03-31 18:41:48

идет вправо и может быть использован таким же образом для левой
.yourComponent
{
   float: right;
   bottom: 0;
}