Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan 4 div untuk dipaparkan sebelah menyebelah dalam css
Bagaimana untuk menetapkan 4 div untuk dipaparkan sebelah menyebelah dalam css
- 青灯夜游asal
- 2021-07-21 15:41:0511931semak imbas
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!