Biasanya, ketika kami ingin memiliki beberapa DIVs
baris, kami akan menggunakan float: left
, tetapi sekarang saya menemukan trikdisplay:inline-block
Contoh tautan di sini . Menurut saya itu display:inline-block
adalah cara yang lebih baik untuk align
DIVs
berturut-turut, tetapi apakah ada kekurangannya? Mengapa pendekatan ini kurang populer daripada float
triknya?
inline
, bukaninline-block
. Tapi yang pertama terkait bagus: stackoverflow.com/a/11823622/918414Jawaban:
Dalam 3 kata:
inline-block
lebih baik.Blok Sebaris
Satu-satunya kelemahan dari
display: inline-block
pendekatan ini adalah bahwa di IE7 dan di bawahnya sebuah elemen hanya dapat ditampilkaninline-block
jika sudahinline
secara default. Artinya, alih-alih menggunakan<div>
elemen, Anda harus menggunakan<span>
elemen. Ini sama sekali bukan kelemahan besar karena secara semantik a<div>
adalah untuk membagi halaman sedangkan a<span>
hanya untuk menutupi rentang halaman, jadi tidak ada perbedaan semantik yang besar. Manfaat besar daridisplay:inline-block
adalah bahwa ketika pengembang lain mempertahankan kode Anda di kemudian hari, jauh lebih jelas apa yangdisplay:inline-block
dantext-align:right
sedang coba dicapai daripada pernyataanfloat:left
ataufloat:right
. Manfaat favorit saya dariinline-block
pendekatan ini adalah mudah digunakanvertical-align: middle
,line-height
dantext-align: center
untuk memusatkan elemen dengan sempurna, dengan cara yang intuitif. Saya menemukan posting blog yang bagus tentang cara menerapkan blok-sebaris lintas-browser, di blog Mozilla . Berikut kompatibilitas browsernya .Mengapung
Alasan penggunaan
float
metode ini tidak cocok untuk tata letak halaman Anda adalah karenafloat
properti CSS pada awalnya dimaksudkan hanya untuk memiliki teks yang membungkus gambar (gaya majalah) dan, menurut desain, tidak paling cocok untuk tujuan tata letak halaman umum. Saat mengubah elemen mengambang nanti, terkadang Anda akan mengalami masalah pemosisian karena tidak ada di aliran halaman . Kerugian lainnya adalah umumnya memerlukan perbaikan yang jelas jika tidak maka dapat merusak aspek halaman. Clearfix memerlukan penambahan elemen setelah elemen yang diapungkan untuk menghentikan induknya agar tidak runtuh di sekitarnya yang melintasi garis semantik antara memisahkan gaya dari konten dan dengan demikian merupakan anti-pola dalam pengembangan web .Masalah ruang putih apa pun yang disebutkan dalam tautan di atas dapat dengan mudah diperbaiki dengan
white-space
properti CSS.Edit:
SitePoint adalah sumber yang sangat kredibel untuk saran desain web dan mereka tampaknya memiliki pendapat yang sama dengan saya:
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
Pembaruan 2015 - Flexbox adalah alternatif yang baik untuk peramban modern :
Info lebih lanjut
Pembaruan 21 Desember 2016
Bootstrap 4 menghapus dukungan untuk IE9, dan dengan demikian menghilangkan float dari baris dan menjadi Flexbox penuh.
Tarik permintaan # 21389
sumber
white-space
propertinya - dapatkah Anda menjelaskannya?letter-spacing
di tempat lain di CSS saya.Meskipun saya setuju bahwa secara umum
inline-block
lebih baik, ada satu hal tambahan yang perlu dipertimbangkan jika Anda menggunakan lebar persentase untuk membuat kisi responsif (atau jika Anda ingin lebar piksel sempurna):Jika Anda menggunakan
inline-block
untuk kisi yang total lebarnya 100% atau mendekati 100%, Anda perlu memastikan markup HTML Anda tidak berisi spasi kosong di antara kolom .Dengan float, ini bukan sesuatu yang perlu Anda khawatirkan - kolom mengambang di atas spasi atau konten lain di antara kolom. Jawaban pertanyaan ini memiliki beberapa tip bagus tentang cara menghapus spasi HTML tanpa membuat kode Anda jelek .
Jika karena alasan apa pun Anda tidak dapat mengontrol markup HTML (mis. CMS yang dibatasi), Anda dapat mencoba trik yang dijelaskan di sini, atau Anda mungkin perlu berkompromi dan menggunakan float sebagai ganti blok-sebaris. Ada juga trik CSS jelek yang seharusnya hanya digunakan dalam keadaan ekstrim, seperti
font-size:0;
pada penampung kolom kemudian menerapkan kembali ukuran font dalam setiap kolom .Sebagai contoh:
float: left
. Ini "hanya berfungsi" (tetapi untuk pembungkusnya perlu dibersihkan).inline-block
. Spasi putih antar blok menciptakan ruang dengan lebar tetap yang mendorong lebar total melebihi 100%, merusak tata letak dan menyebabkan kolom terakhir turun ke bawah baris.inline-block
dan tanpa spasi di antara kolom di HTML . Ini "berfungsi" lagi - tetapi HTML lebih jelek dan CMS Anda mungkin memaksakan semacam prettification atau indentasi ke output HTML-nya sehingga hal ini sulit dicapai dalam kenyataan.sumber
div+(whitespace) {display:none}
atau sesuatu?<div class="inlinething">hi</div> <div class="inlinething">there</div> more content here...
?)Jika Anda ingin menyelaraskan
div
dengan piksel yang akurat, maka gunakan float.inline-block
tampaknya selalu mengharuskan Anda untuk memangkas beberapa piksel (setidaknya di IE)sumber
* {padding:0px; margin:0px; }
karena ini membantu menyeimbangkan pengkodean sayaAnda dapat menemukan jawabannya secara mendalam di sini .
Namun secara umum dengan
float
Anda perlu menyadari dan menjaga elemen sekitarnya daninline-block
cara sederhana untuk elemen garis.Terima kasih
sumber
Ada satu karakteristik tentang blok-sebaris yang mungkin tidak lurus ke depan. Artinya, nilai default untuk perataan vertikal di CSS adalah baseline. Ini dapat menyebabkan beberapa perilaku penyelarasan yang tidak terduga. Lihat artikel ini.
http://www.brunildo.org/test/inline-block.html
Sebaliknya, saat Anda melakukan float: left, div tidak bergantung satu sama lain dan Anda dapat menyelaraskannya menggunakan margin dengan mudah.
sumber