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

281

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/

float: gambar 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.

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

tampilan: gambar sebaris

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/

tidak ada gambar spasi putih html

display: inline-block;

Tampaknya berperilaku persis seperti display:inline;.

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

display: gambar inline-block

display: table-cell;

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

tampilan: gambar sel-tabel

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.

EGHDK
sumber
4
Lihat apa yang digunakan orang-orang di html5boilerplate dan Twitter Bootstrap dan tetap menggunakannya
Robert Niestroj
1
Ada artikel bagus tentang memerangi ruang di css-trik: css-tricks.com/fighting-the-space-between-inline-block-elements
Lea Rosema
Saya mencoba menggunakan display: inlineproperti dan saya menemukan bahwa itu tidak merawat bantalan pada elemen anak dengan benar. Tetapi jika saya menggunakan display: inline-blockini dirawat secara otomatis. Silakan lihat tautan - codepen.io/prashdeep/pen/rVOyvd Tolong beri tahu saya masukan Anda tentang hal yang sama
zilcuanu

Jawaban:

200

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.

Spudley
sumber
2
Anda tidak perlu markup tambahan untuk menghapus mengapung, lihat jawaban saya tentang itu.
Lie Ryan
3
Respons paling kuat = jawaban.
EGHDK
2
Saya selalu menggunakan inline-blockkarena dibuat persis untuk kasus ini.
Rápli András
1
Metode yang baik untuk menghapus spasi putih yang menampilkan: inline-block create, Anda dapat mengatur ukuran font menjadi 0 pada elemen kontainer, kemudian mengatur sendiri elemen inline yang diinginkan. Ini menghindari keharusan menghapus spasi putih di html
AlexMorley-Finch
1
@ AlexMorley-Finch: Memang, itu adalah satu solusi yang bagus. Berhati-hatilah, namun itu tidak berfungsi jika Anda menggunakan ukuran font dalam ems. 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.
Spudley
34

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.

masukkan deskripsi gambar di sini

Lie Ryan
sumber
Poin luar biasa ini, tidak disebutkan dalam tutorial populer BANYAK. Beberapa pertanyaan: Apakah ini benar-benar diuji di browser yang berbeda? Apa metode pilihan Anda untuk menggambar pemisah antara dua blok seperti nav dan konten? Alasan saya bertanya adalah karena jika div di atas dari ketinggian yang berbeda akan sulit.
Shital Shah
@ ShitalShah: Saya tidak yakin apa yang Anda maksud dengan "ini", tapi saya sudah menerapkan menu horisontal yang tak terhitung jumlahnya dan float left and overflow adalah IMO cara paling bersih dan paling dapat diandalkan untuk mengimplementasikan menu horisontal di banyak browser yang berbeda, lama dan baru. Untuk menambahkan pemisah, saya biasanya menggunakan border kiri (atau gambar latar belakang untuk pemisah yang lebih bagus, jika Anda tidak perlu peduli dengan browser lama maka Anda juga dapat menggunakan CSS3 border-image). Saya tidak begitu mengerti apa yang Anda maksud dengan ketinggian yang berbeda, ingin menjelaskan lebih banyak atau menambahkan biola?
Lie Ryan
Ini menjelaskan banyak tentang kliring dan saya tidak tahu bahwa melimpah bisa melakukan ini. Saya terbiasa dengan metode: setelah di mana Anda menambahkan konten: "." dan visibilitas: disembunyikan. Terima kasih untuk ini
Nils_e
9

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.

Zendy
sumber
+1 untuk tautan ke artikel Chris Coyier. Salah satu tambahan dalam daftarnya adalah metode yang digunakan grid Pure CSS YUI : github.com/yui/pure/blob/master/src/grids/css/grids-core.css
Web_Designer
4

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.

Chad
sumber
jika "Anda selalu harus memeriksa bahwa IE tidak payah" maka Anda akan selalu kecewa. hehe. (Di sisi lain, dia cukup benar untuk mengatakan Anda harus selalu memeriksa bahwa kode Anda tidak menyedot setiap versi IE yang ingin Anda dukung)
Spudley
4

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

Wtower
sumber
0

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 .

masukkan deskripsi gambar di sini

Alireza
sumber