Saya memiliki tata letak yang lancar menggunakan bootstrap Twitter, di mana saya memiliki baris dengan dua kolom. Kolom pertama memiliki banyak konten, yang ingin saya isi rentangnya secara normal. Kolom kedua hanya memiliki tombol dan beberapa teks, yang ingin saya ratakan ke bawah relatif ke sel di kolom pertama.
Inilah yang saya miliki:
-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
| | |short content |
| content | +----------------+
| that |
| is tall |
| |
+----------------+
-----------------------------------------------
Inilah yang saya inginkan:
-row-fluid-------------------------------------
+-span6----------+
| |
| content |
| that |
| is tall | +-span6----------+
| | |short content |
+----------------+ +----------------+
-----------------------------------------------
Saya telah melihat solusi yang membuat rentang pertama menjadi tinggi absolut, dan memposisikan rentang kedua relatif terhadapnya, tetapi solusi di mana saya tidak perlu menentukan ketinggian absolut div saya akan lebih disukai. Saya juga terbuka untuk memikirkan ulang sepenuhnya tentang cara mencapai efek yang sama. Saya belum menikah dengan penggunaan perancah ini, sepertinya hal itu paling masuk akal bagi saya.
Tata letak ini sebagai biola:
sumber
Jawaban:
Harap diperhatikan: untuk pengguna Bootstrap 4+, harap pertimbangkan solusi Christophe (Bootstrap 4 memperkenalkan flexbox, yang menyediakan solusi khusus CSS yang lebih elegan). Berikut ini akan bekerja untuk versi Bootstrap sebelumnya ...
Lihat http://jsfiddle.net/jhfrench/bAHfj/ untuk solusi yang berhasil.
Sisi positifnya:
pull-down
.Sekarang kabar buruknya:
sumber
.pull-left
dan.pull-right
), tanpa mempengaruhi saudara kandung. Bisakah itu dilakukan dengan solusi khusus CSS?Ini adalah solusi yang diperbarui untuk Bootstrap 3 (seharusnya berfungsi untuk versi yang lebih lama) yang hanya menggunakan CSS / KURANG:
http://jsfiddle.net/silb3r/0srp42pb/11/
Anda mengatur ukuran font menjadi 0 pada baris (jika tidak, Anda akan berakhir dengan spasi yang mengganggu di antara kolom), lalu hapus float kolom, atur tampilan ke
inline-block
, atur ulang ukuran fontnya, dan kemudianvertical-align
dapat diatur ke apapun yang Anda butuhkan.Tidak perlu jQuery.
sumber
div
kevertical-align: middle;
..myrow
) ... bukankah ini berarti Anda tidak dapat memiliki satu kolom diratakan atas, satu kolom diratakan di bawah, dan kolom ketiga diratakan?Anda dapat menggunakan flex:
sumber
Anda perlu menambahkan beberapa gaya untuk
span6
, smthg seperti itu:dan ini biola Anda: http://jsfiddle.net/sgB3T/
sumber
padding-left: 0
danpadding-right: 0
di semua cols di baris itu.Berikut juga arahan angularjs untuk mengimplementasikan fungsi ini
sumber
Cukup atur orang tua ke
display:flex;
dan anak kemargin-top:auto
. Ini akan menempatkan konten anak di bagian bawah elemen induk, dengan asumsi elemen induk memiliki tinggi lebih besar dari elemen anak.Tidak perlu mencoba dan menghitung nilai
margin-top
ketika Anda memiliki ketinggian pada elemen induk Anda atau elemen lain yang lebih besar dari elemen anak Anda dalam elemen induk Anda.sumber
Berdasarkan jawaban lain di sini adalah versi yang lebih responsif. Saya membuat perubahan dari versi Ivan untuk mendukung viewports dengan lebar <768px dan untuk lebih mendukung pengubahan ukuran jendela yang lambat.
sumber
margin-top
ke 0, lalu menyetelnya lagi ke nilai baru? Juga, mengapa melakukan hal-hal ini dalam duaeach()
"putaran"?Ini didasarkan pada solusi cfx, tetapi daripada mengatur ukuran font menjadi nol di penampung induk untuk menghapus ruang antar-kolom yang ditambahkan karena tampilan: blok-inline dan harus mengatur ulang, saya hanya menambahkan
ke div kolom untuk mengimbangi.
sumber
Yah, aku tidak seperti jawaban mereka, solusi saya dari masalah yang sama adalah untuk menambahkan ini:
<div> </div>
. Jadi dalam skema Anda akan terlihat seperti ini (lebih atau kurang), tidak ada perubahan gaya yang diperlukan dalam kasus saya:sumber
akan ditambahkan jika panjang sel kiri tidak diketahui?sumber