Saya punya div
beberapa anak:
<div class="content">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some more or less text</p>
<a href="/" class="button">Click me</a>
</div>
dan saya ingin tata letak berikut:
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
|can have many |
|rows |
| |
| |
| |
|link-button |
-------------------
Terlepas dari berapa banyak teks di dalam p
saya ingin tetap .button
selalu di bagian bawah tanpa mengeluarkannya dari arus. Saya pernah mendengar ini bisa dicapai dengan Flexbox tetapi saya tidak bisa membuatnya berfungsi.
postition: absolute; bottom 0;
?position:relative
- itu konyol karena saya pikir itu relatif secara default tetapi Anda telah SET agar posisi absolut anak terkandung. Makabottom:0
akan cocok siram.static
tidakrelative
.Jawaban:
Anda dapat menggunakan margin otomatis
Jadi, Anda dapat menggunakan salah satu dari ini (atau keduanya):
Tampilkan cuplikan kode
Atau, Anda dapat membuat elemen sebelum
a
tumbuh untuk mengisi ruang yang tersedia:Tampilkan cuplikan kode
sumber
html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } #site-content { flex: 1; }
height: 100%
pada elemen induk yang Anda coba dorong sesuatu ke bawahmargin-top: auto;
Anda dapat menggunakan display: flex untuk memposisikan elemen ke bawah, tetapi saya tidak berpikir Anda ingin menggunakan flex dalam hal ini, karena itu akan mempengaruhi semua elemen Anda.
Untuk memposisikan elemen ke bawah menggunakan flex coba ini:
Taruhan terbaik Anda adalah mengatur posisi: absolut ke tombol dan mengaturnya
bottom: 0
, atau Anda dapat menempatkan tombol di luar wadah dan menggunakan negatiftransform: translateY(-100%)
untuk membawanya dalam wadah seperti ini:Periksa JSFiddle ini
sumber
Solusi dengan
align-self: flex-end;
tidak bekerja untuk saya tetapi yang ini jika Anda ingin menggunakan flex:Hasil
Kode
Catatan: Saat "menjalankan cuplikan kode" Anda harus menggulir ke bawah untuk melihat tautan di bagian bawah.
sumber
Tidak yakin tentang flexbox tetapi Anda dapat menggunakan properti posisi.
set
div
position: relative
elemen induk dan anak yang mungkin berupa<p>
atau<h1>
dll. setposition: absolute
danbottom: 0
.Contoh:
index.html
style.css
Pena kode di sini.
sumber
position:fixed
tidak akan bekerja karena itu tidak akan relatif terhadap wadah yang ada di dalamnya. Mungkin maksud Andaposition:absolute
?Demo: https://codepen.io/ferittuncer/pen/YzygpWX
sumber
Saat mengatur tampilan Anda agar fleksibel , Anda bisa menggunakan
flex
properti untuk menandai konten mana yang dapat tumbuh dan konten mana yang tidak bisa.Properti fleksibel
sumber
Coba ini
sumber
Saya baru saja menemukan solusi untuk ini.
bagi mereka yang tidak puas dengan jawaban yang diberikan dapat mencoba pendekatan ini dengan flexbox
CSS
HTML
sumber