mengapung: kiri; vs display: inline; vs display: inline-block; vs display: table-cell;

Pertanyaan saya)

1. Apakah ada dari metode ini yang disukai oleh perancang web profesional?

2. Apakah ada metode ini yang dipilih oleh browser web saat menggambar situs web?

3. Apakah ini semua hanya preferensi pribadi?

4. Apakah ada teknik lain yang saya lewatkan?

Catatan: Pertanyaan di atas berkaitan dengan perancangan tata letak multi-kolom

mengapung: kiri;

http://jsfiddle.net/CDe6a/

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.

http://jsfiddle.net/CDe6a/1/

Menghapus spasi dari html tampaknya menjadi yang paling mudah memperbaiki masalah ini, tetapi tidak diinginkan jika Anda benar-benar pilih-pilih tentang html Anda.

http://jsfiddle.net/CDe6a/2/

display: inline-block;

Tampaknya berperilaku persis seperti display:inline;.

http://jsfiddle.net/CDe6a/3/

display: table-cell;

http://jsfiddle.net/CDe6a/4/

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.

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 floatkonsep 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 :afterpemilih 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:1merupakan back-back hack untuk dukungan yang rusak inline-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-blockadalah 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-celldirancang untuk digunakan dalam konteks berada di dalam elemen yang ditata sebagai tabledan table-row; menggunakan table-cellsecara 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.

Saya biasanya menggunakan float: left;dan menambah overflow: auto;untuk memecahkan masalah induk runtuh (seperti mengapa ini bekerja, overflow: autoakan memperluas induk daripada menambahkan scrollbar jika Anda tidak memberikan tinggi eksplisit, juga overflow: hiddenberfungsi). Sebagian besar kebutuhan perataan vertikal yang saya miliki adalah untuk satu baris teks di bilah menu , yang dapat diselesaikan menggunakan line-heightproperti. 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-celladalah 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.

Saya akan mengatakan itu tergantung pada apa yang Anda butuhkan untuk:

1. Jika Anda membutuhkannya hanya untuk mendapatkan tata letak 3 kolom, saya sarankan untuk melakukannya dengan float.

2. 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/ .

3. 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.

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: inlinehack 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-size0 untuk orang tua, kemudian memberikan font-sizekembali kepada anak-anak, meskipun itu merepotkan, dan kotor.

Sebagai catatan saja, untuk menambah jawaban Spudley, ada juga kemungkinan untuk menggunakan position: absolutedan 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).

Saya lebih suka inline-block, tetapi floatmasih 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 .