hujung hadapan webtutorial cssBagaimana untuk menetapkan 4 div untuk dipaparkan sebelah menyebelah dalam cssBagaimana untuk menetapkan 4 div untuk dipaparkan sebelah menyebelah dalam css
Cara menetapkan 4 div bersebelahan dengan css: 1. Gunakan atribut apungan untuk mengapungkan 4 div. 2. Gunakan gaya "display:inline;" atau "display: inline-block;" untuk menukar empat div menjadi elemen sebaris atau elemen blok sebaris.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
div ialah elemen blok yang menduduki garis dengan sendirinya, dan lebarnya secara automatik mengisi lebar elemen induknya bersama-sama akan membalut dan dipaparkan secara automatik. Jadi bagaimana untuk membuat beberapa elemen div dipaparkan bersebelahan? Izinkan saya memperkenalkan kepada anda kaedah di bawah.
Kaedah 1: Gunakan apungan untuk mengapungkan div
Selagi jumlah lebar kotak div sebelah menyebelah anda kurang daripada atau sama dengan lebar daripada kotak paling luar, anda boleh melaksanakan berbilang objek div Paparan sebelah menyebelah.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 120px;
border: 1px solid red;
float: left;
}
</style>
</head>
<body>
<div>div测试文本！</div>
<div>div测试文本！</div>
<div>div测试文本！</div>
<div>div测试文本！</div>
</body>
</html>Rendering:
Atribut apungan mentakrifkan ke arah mana elemen terapung. Dari segi sejarah, sifat ini sentiasa digunakan pada imej, menyebabkan teks membalut imej, tetapi dalam CSS, sebarang elemen boleh diapungkan. Elemen terapung mencipta kotak peringkat blok, tanpa mengira jenis elemen itu.
Kaedah 2: Gunakan atribut paparan untuk menukar div kepada elemen sebaris atau elemen blok sebaris
Elemen sebaris atau elemen blok sebaris tidak akan menduduki satu baris dengan sendirinya, bersebelahan dalam -elemen baris akan disusun dalam baris yang sama, dan tidak akan dipecahkan sehingga satu baris tidak muat.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 200px;
border: 1px solid red;
display:inline;
/* display: inline-block; */
}
</style>
</head>
<body>
<div>div测试文本！</div>
<div>div测试文本！</div>
<div>div测试文本！</div>
<div>div测试文本！</div>
</body>
</html>Rendering:
Atribut paparan digunakan untuk menentukan elemen yang dijana semasa mencipta satu susun atur Jenis kotak paparan.
display:inline;: Elemen akan dipaparkan sebagai elemen sebaris, tanpa pemisah baris sebelum dan selepas elemen.
display:inline-block;: Elemen akan dipaparkan sebagai elemen blok sebaris, tanpa pemisah baris sebelum dan selepas elemen.
(Mempelajari perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Bagaimana untuk menetapkan 4 div untuk dipaparkan sebelah menyebelah dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kemas kini 'CSS4'Apr 11, 2025 pm 12:05 PMSejak saya mula -mula berbunyi pada perkara CSS4¹, ada lebih banyak perbincangan di atasnya. Saya akan mengulangi pemikiran kegemaran saya dari orang lain di sini. Ada
Tiga jenis kodApr 11, 2025 pm 12:02 PMSetiap kali saya memulakan projek baru, saya menyusun kod yang saya cari dalam tiga jenis, atau kategori jika anda suka. Dan saya fikir jenis ini boleh digunakan
HTTPS mudah!Apr 11, 2025 am 11:51 AMSaya ' telah bersalah secara terbuka merungut kerumitan HTTPS. Pada masa lalu, saya membeli sijil SSL dari vendor pihak ketiga dan menghadapi masalah
Panduan Atribut Data HTMLApr 11, 2025 am 11:50 AMSemua yang anda ingin tahu mengenai atribut data dalam HTML, CSS, dan JavaScript.
Memahami kebolehubahan dalam JavaScriptApr 11, 2025 am 11:47 AMSekiranya anda tidak bekerja dengan kebolehubahan dalam JavaScript sebelum ini, anda mungkin mudah mengelirukan dengan memberikan pembolehubah kepada nilai baru, atau penugasan semula.
Input bentuk gaya tersuai dengan ciri CSS modenApr 11, 2025 am 11:45 AMIa mungkin sepenuhnya untuk membina kotak semak tersuai, butang radio, dan suis bertukar hari ini, sambil tetap semantik dan boleh diakses. Kami tidak memerlukan
Watak nota kakiApr 11, 2025 am 11:34 AMTerdapat watak nombor superset khas yang kadang -kadang sesuai untuk nota kaki. Di sini mereka:
Cara membuat pemasa undur animasi dengan HTML, CSS dan JavaScriptApr 11, 2025 am 11:29 AMPernahkah anda memerlukan pemasa undur dalam projek? Untuk sesuatu seperti itu, mungkin semula jadi untuk mencapai plugin, tetapi sebenarnya lebih banyak lagi
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
