Pertanyaan saya)
Apakah ada dari metode ini yang disukai oleh perancang web profesional?
Apakah ada metode ini yang dipilih oleh browser web saat menggambar situs web?
Apakah ini semua hanya preferensi pribadi?
Apakah ada teknik lain yang saya lewatkan?
Catatan: Pertanyaan di atas berkaitan dengan perancangan tata letak multi-kolom
mengapung: kiri;
Ini adalah metode yang selalu saya gunakan ketika membuat tata letak kolom, dan sepertinya berfungsi dengan baik. Orang tua tidak runtuh dengan sendirinya, jadi Anda hanya perlu mengingatnya clear:both;
setelahnya. Kon lain yang saya temukan adalah ketidakmampuan untuk menyelaraskan teks secara vertikal.
display: inline;
Ini tampaknya memperbaiki masalah orang tua yang runtuh, tetapi menambahkan spasi putih.
Menghapus spasi dari html tampaknya menjadi yang paling mudah memperbaiki masalah ini, tetapi tidak diinginkan jika Anda benar-benar pilih-pilih tentang html Anda.
display: inline-block;
Tampaknya berperilaku persis seperti display:inline;
.
display: table-cell;
Bekerja dengan sempurna.
Pikiran saya:
Saya yakin saya kehilangan banyak hal, seperti pengecualian tertentu yang akan merusak tata letak tetapi, display:table-cell;
tampaknya bekerja dengan baik, dan saya pikir saya akan mulai mengganti float:left;
karena saya selalu tampak kacau clear:both;
. Saya telah membaca banyak artikel dan blog tentang hal ini di web, tetapi tidak satupun dari mereka memberi saya jawaban yang pasti tentang apa yang harus saya gunakan ketika meletakkan situs web saya.
display: inline
properti dan saya menemukan bahwa itu tidak merawat bantalan pada elemen anak dengan benar. Tetapi jika saya menggunakandisplay: inline-block
ini dirawat secara otomatis. Silakan lihat tautan - codepen.io/prashdeep/pen/rVOyvd Tolong beri tahu saya masukan Anda tentang hal yang samaJawaban:
Dari opsi yang Anda tanyakan:
float:left;
Saya tidak suka mengapung karena kebutuhan untuk memiliki markup tambahan untuk menghapus float. Sejauh yang saya ketahui, keseluruhan
float
konsep dirancang dengan buruk dalam spesifikasi CSS. Tidak ada yang bisa kita lakukan tentang itu sekarang. Tetapi yang penting itu berfungsi, dan bekerja di semua browser (bahkan IE6 / 7), jadi gunakan itu jika Anda suka.Markup tambahan untuk pembersihan mungkin tidak diperlukan jika Anda menggunakan
:after
pemilih untuk menghapus float, tetapi ini bukan pilihan jika Anda ingin mendukung IE6 atau IE7.display:inline;
Ini tidak boleh digunakan untuk tata letak, dengan pengecualian IE6 / 7, di mana
display:inline; zoom:1
merupakan back-back hack untuk dukungan yang rusakinline-block
.display:inline-block;
Ini adalah opsi favorit saya. Ini bekerja dengan baik dan konsisten di semua browser, dengan peringatan untuk IE6 / 7, yang mendukungnya untuk beberapa elemen. Tetapi lihat di atas untuk solusi hacky untuk mengatasi ini.
Peringatan besar lainnya
inline-block
adalah karena aspek inline, spasi putih antar elemen diperlakukan sama dengan spasi putih antara kata-kata teks, sehingga Anda bisa mendapatkan celah yang muncul di antara elemen. Ada beberapa cara untuk mengatasi hal ini, tetapi tidak ada yang ideal. (yang terbaik adalah tidak memiliki ruang di antara elemen-elemen)display:table-cell;
Lain di mana Anda akan mengalami masalah dengan kompatibilitas browser. IE yang lebih lama tidak akan bekerja dengan ini sama sekali. Tetapi bahkan untuk browser lain, patut dicatat bahwa
table-cell
dirancang untuk digunakan dalam konteks berada di dalam elemen yang ditata sebagaitable
dantable-row
; menggunakantable-cell
secara terpisah bukanlah cara yang dimaksudkan untuk melakukannya, jadi Anda mungkin mengalami berbagai peramban yang memperlakukannya secara berbeda.Teknik lain yang mungkin Anda lewatkan? Iya.
Karena Anda mengatakan ini untuk tata letak multi-kolom, ada fitur Kolom CSS yang mungkin ingin Anda ketahui. Namun itu bukan fitur yang paling didukung (tidak didukung oleh IE bahkan di IE9, dan awalan vendor yang diperlukan oleh semua browser lain), jadi Anda mungkin tidak ingin menggunakannya. Tapi itu pilihan lain, dan Anda memang bertanya.
Ada juga fitur CSS FlexBox, yang dimaksudkan untuk memungkinkan Anda memiliki teks yang mengalir dari kotak ke kotak. Ini adalah fitur menarik yang akan memungkinkan beberapa tata letak yang rumit, tetapi ini masih sangat banyak dalam pengembangan - lihat http://html5please.com/#flexbox
Semoga itu bisa membantu.
sumber
inline-block
karena dibuat persis untuk kasus ini.em
s. Itu berarti itu mungkin bukan solusi yang cocok untuk semua kasus. Anda juga mungkin ingin melihat jawaban ini saya posting secara terpisah, yang mencakup poin ini, dan opsi lain untuk menangani masalah ruang putih.Saya biasanya menggunakan
float: left;
dan menambahoverflow: auto;
untuk memecahkan masalah induk runtuh (seperti mengapa ini bekerja,overflow: auto
akan memperluas induk daripada menambahkan scrollbar jika Anda tidak memberikan tinggi eksplisit, jugaoverflow: hidden
berfungsi). Sebagian besar kebutuhan perataan vertikal yang saya miliki adalah untuk satu baris teks di bilah menu , yang dapat diselesaikan menggunakanline-height
properti. Jika saya benar-benar perlu meluruskan elemen blok, saya akan menetapkan ketinggian eksplisit pada induk dan item yang disejajarkan secara vertikal, posisi absolut, 50% teratas, dan margin negatif.Alasan saya tidak menggunakan
display: table-cell
adalah cara itu meluap ketika Anda memiliki lebih banyak item daripada yang bisa ditangani oleh lebar situs. table-cell akan memaksa pengguna untuk menggulir secara horizontal, sementara float akan membungkus menu overflow, membuatnya tetap dapat digunakan tanpa perlu pengguliran horizontal.Hal terbaik tentang float: left and overflow: auto adalah ia bekerja sepanjang jalan kembali ke IE6 tanpa peretasan, mungkin bahkan lebih jauh.
sumber
Saya akan mengatakan itu tergantung pada apa yang Anda butuhkan untuk:
Jika Anda membutuhkannya hanya untuk mendapatkan tata letak 3 kolom, saya sarankan untuk melakukannya dengan
float
.Jika Anda membutuhkannya untuk menu, Anda dapat menggunakannya
inline-block
. Untuk masalah spasi, Anda dapat menggunakan beberapa trik seperti dijelaskan oleh Chris Coyier di sini http://css-tricks.com/fighting-the-space-between-inline-block-elements/ .Jika Anda perlu membuat opsi pilihan ganda, yang lebar perlu disebar secara merata di dalam kotak yang ditentukan, maka saya lebih suka
display: table
. Ini tidak akan berfungsi dengan benar di beberapa browser, jadi itu tergantung pada dukungan browser Anda.Terakhir, apa yang mungkin merupakan metode terbaik yang digunakan
flexbox
. Spesifikasi untuk ini telah berubah beberapa kali, jadi belum stabil dulu. Tapi begitu selesai, ini akan menjadi metode terbaik yang saya rasa.sumber
Saya lebih suka inline-block, walaupun float juga berguna. Table-cell tidak dirender dengan benar oleh IE lama (tidak juga inline-block, tapi ada
zoom: 1; *display: inline
hack yang sering saya gunakan). Jika Anda memiliki anak yang memiliki ketinggian lebih kecil dari orang tuanya, mengapung akan membawa mereka ke atas, sedangkan inline-block terkadang akan kacau.Sebagian besar waktu, browser akan menginterpretasikan semuanya dengan benar, kecuali, tentu saja, itu IE. Anda selalu harus memeriksa untuk memastikan bahwa IE tidak mengisap - misalnya, konsep sel tabel.
Dalam semua kenyataan, ya, itu bermuara pada preferensi pribadi.
Salah satu teknik yang bisa Anda gunakan untuk menghilangkan ruang putih adalah dengan menetapkan
font-size
0 untuk orang tua, kemudian memberikanfont-size
kembali kepada anak-anak, meskipun itu merepotkan, dan kotor.sumber
Sebagai catatan saja, untuk menambah jawaban Spudley, ada juga kemungkinan untuk menggunakan
position: absolute
dan margin jika Anda tahu lebar kolom.Bagi saya, masalah utama ketika membuat metode adalah apakah Anda memerlukan kolom untuk mengisi seluruh ketinggian (ketinggian yang sama), di mana tabel-sel adalah metode termudah (jika Anda tidak terlalu peduli untuk browser lama).
sumber
Saya lebih suka
inline-block
, tetapifloat
masih merupakan cara yang berguna untuk menyatukan elemen-elemen HTML, khususnya ketika kita memiliki elemen mana yang harus menempel di kiri dan yang kanan, mengapung bekerja lebih baik dengan menulis lebih sedikit garis, sementara inline-block bekerja dengan baik dalam banyak kasus lainnya .sumber