Maison > interface Web > tutoriel CSS > le corps du texte

Comment créer trois divs côte à côte avec CSS

青灯夜游
Libérer: 2021-11-10 17:38:26
original
16431 Les gens l'ont consulté

Méthode CSS pour créer trois div côte à côte : 1. Définissez le style "display:inline;" ou "display:inline-block;" sur les trois éléments div ; 2. Utilisez l'attribut float pour faire flotter les trois éléments div ; . Syntaxe "float:left;".

Comment créer trois divs côte à côte avec CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

div est un élément de bloc et s'affiche par défaut sur sa propre ligne :

<div></div>
<div></div>
<div></div>
Copier après la connexion

Comment créer trois divs côte à côte avec CSS

Alors, comment faire pour que ces trois divs s'affichent côte à côte ? Il existe deux méthodes, laissez-moi vous les présenter ci-dessous :

1. Utilisez l'attribut display

pour définir les trois div sur display:inline; ou display:inline-. bloquer ; display:inline;display:inline-block;

div{
	width: 100px;
	height: 20px;
	border: 1px solid red;
	display:inline-block;
}
Copier après la connexion

Comment créer trois divs côte à côte avec CSS

注:当设置成display:inline;

div{
	width: 100px;
	height: 20px;
	border: 1px solid red;
	float:left;
}
Copier après la connexion
2. png

Remarque : Lorsqu'il est défini sur display:inline;, il doit y avoir du contenu dans le div, sinon le div ne peut pas être ouvert.

2. Utilisez l'attribut float

Comment créer trois divs côte à côte avec CSS pour faire flotter les trois divs

rrreee

(Partage vidéo d'apprentissage : 🎜Tutoriel vidéo CSS🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal