Saya memiliki div
dengan beberapa anak-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 aku ingin tata letak berikut:
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
|can have many |
|rows |
| |
| |
| |
|link-button |
-------------------
Terlepas berapa banyak teks di p
saya ingin tetap .tombol
selalu di bawah tanpa mengambil keluar dari aliran. I'telah mendengar hal ini dapat dicapai dengan Flexbox tapi aku bisa't mendapatkan itu untuk bekerja.
Anda dapat menggunakan auto margin
Sebelum alignment via
membenarkan-content
danmenyesuaikan diri
, positif ruang bebas didistribusikan ke auto margin yang di dimensi.
Sehingga anda dapat menggunakan salah satu (atau kedua):
p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */
.content {
height: 200px;
border: 1px solid;
display: flex;
flex-direction: column;
}
h1, h2 {
margin: 0;
}
a {
margin-top: auto;
}
<div class="content">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some text more or less</p>
<a href="/" class="button">Click me</a>
</div>
Atau, anda dapat membuat elemen sebelum a
tumbuh untuk mengisi ruang yang tersedia:
p { flex-grow: 1; } /* Grow to fill available space */
.content {
height: 200px;
border: 1px solid;
display: flex;
flex-direction: column;
}
h1, h2 {
margin: 0;
}
p {
flex-grow: 1;
}
<div class="content">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some text more or less</p>
<a href="/" class="button">Click me</a>
</div>
Anda dapat menggunakan tampilan: flex untuk posisi elemen ke bawah, tapi saya tidak berpikir anda ingin menggunakan flex dalam hal ini, karena hal itu akan mempengaruhi semua elemen.
Untuk posisi elemen bawah menggunakan flex coba ini:
.container {
display: flex;
}
.button {
align-self: flex-end;
}
Anda bertaruh terbaik adalah untuk mengatur posisi: absolut untuk tombol dan set ke bawah: 0
, atau anda dapat menempatkan tombol di luar wadah dan gunakan negatif transform: translateY(-100%)
untuk membawanya dalam wadah seperti ini:
.content {
height: 400px;
background: #000;
color: #fff;
}
.button {
transform: translateY(-100%);
display: inline-block;
}
Check this [JSFiddle][1]
Solusi dengan menyelaraskan diri: flex-end;
didn't bekerja untuk saya, tapi yang satu ini jika anda ingin menggunakan flex:
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
| |
| |
| |
|link button |
-------------------
Catatan: Ketika "menjalankan potongan kode" anda harus gulir ke bawah untuk melihat link di bawah.
.content {
display: flex;
justify-content: space-between;
flex-direction: column;
height: 300px;
}
.content .upper {
justify-content: normal;
}
/* Just to show container boundaries */
.content .upper, .content .bottom, .content .upper > * {
border: 1px solid #ccc;
}
<div class="content">
<div class="upper">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>paragraph text</p>
</div>
<div class="bottom">
<a href="/" class="button">link button</a>
</div>
</div>
Tidak yakin tentang flexbox tetapi dapat anda lakukan dengan menggunakan posisi properti.
set parent div
position: relative
dan elemen anak yang mungkin bisa menjadi <p>
atau <h1>
dll.. set posisi: absolut
dan bottom: 0
.
Contoh:
index.html ``html
Anak
Coba Ini
.content {
display: flex;
flex-direction: column;
height: 250px;
width: 200px;
border: solid;
word-wrap: break-word;
}
.content h1 , .content h2 {
margin-bottom: 0px;
}
.content p {
flex: 1;
}
<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>