Pertanyaan Sejajarkan tombol di bagian bawah div menggunakan CSS


Saya ingin menyelaraskan tombol saya di sudut kanan bawah div saya. Bagaimana saya bisa melakukannya?

enter image description here

Css dari div saat ini:

    float: right;
    width: 83%;
    margin-right: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height:625px;
    overflow:auto;

75
2018-04-28 10:33


asal


Jawaban:


Kamu dapat memakai position:absolute; untuk benar-benar memposisikan elemen di dalam div orangtua. Ketika menggunakan position:absolute; elemen akan diposisikan secara mutlak dari div induk pertama yang diposisikan, jika tidak dapat menemukannya, akan diposisikan secara absolut dari jendela sehingga Anda harus memastikan div konten diposisikan.

Untuk membuat posisi div konten, semua position nilai-nilai yang tidak statis akan bekerja, tetapi relative adalah yang paling mudah karena tidak mengubah posisi div dengan sendirinya.

Jadi, tambahkan position:relative; ke div konten, hapus pelampung dari tombol dan tambahkan css berikut ke tombol:

position: absolute;
right:    0;
bottom:   0;

147
2018-04-28 10:36



Flexbox CSS3 juga dapat digunakan untuk menyelaraskan tombol di bagian bawah elemen induk.

HTML yang dibutuhkan:

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

CSS yang diperlukan:

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

Screenshot:

Output Image

Sumber Daya Berguna:

* {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>


14
2018-03-31 16:04



Wadah orang tua harus memiliki ini:

position: relative;

Tombol itu sendiri harus memiliki ini:

position: relative;
bottom: 20px;
right: 20px;

atau apa pun yang Anda suka


6
2018-01-04 20:10



Ke kanan dan dapat digunakan dengan cara yang sama untuk kiri

.yourComponent
{
   float: right;
   bottom: 0;
}

-25
2017-11-29 02:11