


Mengapa Tidak Dua Div Blok Sebaris Lebar 50% Sentiasa Muat Bersebelahan?
Dec 08, 2024 pm 04:14 PMDiv Blok Sebaris: Isu Saiz Bersebelahan
Latar Belakang:
Dalam HTML, elemen blok sebaris membenarkan aliran sebaris dan sifat model kotak, membolehkan elemen dipaparkan secara mendatar tanpa menimbulkan pemisah baris yang dikaitkan dengan elemen blok.
Masalah:
Walau bagaimanapun, menggunakan elemen blok sebaris untuk memaparkan dua div lebar 50% bersebelahan boleh membawa kepada isu di mana unsur-unsur melakukannya tidak sesuai bersama dalam satu baris.
Sebab:
Apabila menggunakan inline-block elemen, terdapat ruang kosong yang wujud di antara mereka. Ruang putih ini adalah lebih kurang 4px lebar dan boleh menyebabkan gabungan lebar kedua-dua div, walaupun kedua-duanya ditetapkan kepada 50%, melebihi 100% dan dengan itu melimpah.
Penyelesaian:
1. Flexbox atau Grid CSS:
Dalam penyemak imbas moden, menggunakan reka letak Flexbox atau Grid CSS adalah diutamakan untuk mencapai penjajaran DIV bersebelahan dengan kawalan lebar yang tepat.
2. Mengurangkan Lebar Satu DIV:
Seperti yang dinyatakan dalam soalan, mengurangkan lebar satu DIV kepada 49% boleh menyelesaikan isu sebelah menyebelah, tetapi ia akan memperkenalkan jurang kecil antara DIV.
3. Elemen Terapung:
Mengapungkan kedua-dua DIV ialah satu lagi penyelesaian yang berpotensi, tetapi ia memerlukan pelarasan teknik pembersihan untuk reka letak yang betul.
Isu Contoh:
<div>
Dalam contoh di atas, dua DIV dengan lebar 50% akan melimpah disebabkan oleh ruang kosong di antara mereka.
Kesimpulan:
Apabila menggunakan elemen blok sebaris, adalah penting untuk mengetahui isu ruang kosong yang boleh timbul di antara mereka dan mempertimbangkan pendekatan alternatif seperti flexbox atau susun atur grid untuk penjajaran yang lebih tepat dan cekap.
Atas ialah kandungan terperinci Mengapa Tidak Dua Div Blok Sebaris Lebar 50% Sentiasa Muat Bersebelahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Menjadikan Peralihan Svelte Khas pertama anda

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)

Muat naik fail dengan multer di node.js dan ekspres

Animasi dan kesan CSS terbaik di CodeCanyon 2025 (dibayar percuma)
