Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk membuat tiga div bersebelahan dengan css

Bagaimana untuk membuat tiga div bersebelahan dengan css

青灯夜游
青灯夜游asal
2021-11-10 17:38:2616413semak imbas

Cara membuat tiga div bersebelahan dengan css: 1. Tetapkan "display:inline;" atau gaya "display:inline-block;" kepada tiga elemen div buat tiga div Elemen diapungkan dengan sintaks "float:left;".

Bagaimana untuk membuat tiga div bersebelahan dengan css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

div ialah elemen blok, yang dipaparkan pada barisnya sendiri secara lalai:

<div></div>
<div></div>
<div></div>

Bagaimana untuk membuat tiga div bersebelahan dengan css

Jadi bagaimana anda membuat ketiga-tiga div ini paparan sebelah sebelah? Terdapat dua kaedah. Biar saya memperkenalkannya kepada anda di bawah:

1 Gunakan atribut paparan

untuk menetapkan ketiga-tiga div kepada display:inline; atau display:inline-block;

div{
	width: 100px;
	height: 20px;
	border: 1px solid red;
	display:inline-block;
}

Bagaimana untuk membuat tiga div bersebelahan dengan css

Nota: Apabila ditetapkan kepada display:inline;, perlu ada kandungan dalam div, jika tidak, div tidak boleh dibuka.

2. Gunakan atribut apungan

untuk mengapungkan tiga div

div{
	width: 100px;
	height: 20px;
	border: 1px solid red;
	float:left;
}

Bagaimana untuk membuat tiga div bersebelahan dengan css

(video pembelajaran Kongsi: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk membuat tiga div bersebelahan dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn