Maison >interface Web >tutoriel CSS >Comment afficher deux div sur la même ligne avec CSS
Comment afficher deux div sur la même ligne avec CSS
- 青灯夜游original
- 2021-03-05 11:58:1961106parcourir
Comment afficher deux div sur la même ligne : 1. Définissez le style "display:inline;" ou "display:inline-block;" sur les deux éléments div pour les convertir en éléments en ligne ou en bloc en ligne. les éléments feront l’affaire. 2. Définissez le style « float:left; » sur les deux éléments div.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
En HTML, l'élément div est un élément de bloc, et chaque élément de niveau bloc occupe sa propre ligne ; par conséquent, plusieurs éléments div ne peuvent pas être affichés sur une seule ligne.
Alors comment faire afficher deux divs sur la même ligne ? Laissez-moi vous le présenter ci-dessous.
Méthode 1 : Utiliser l'attribut display pour le convertir en un élément en ligne ou un élément de bloc en ligne
L'attribut display est utilisé pour définir le type de boîte d'affichage générée par l'élément lors de la création d'une mise en page.
display:inline;: L'élément sera affiché comme un élément en ligne, sans saut de ligne avant et après l'élément.display:inline-block;: L'élément sera affiché comme un élément de bloc en ligne, sans saut de ligne avant et après l'élément.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 200px;
border: 1px solid red;
display: inline-block;
/*display:inline;*/
}
</style>
</head>
<body>
<div>div测试文本！</div>
<div>div测试文本！</div>
</body>
</html>Rendu :
[Tutoriel recommandé : Vidéo CSS tutoriel ]
Méthode 2 : Utiliser float pour afficher les Div côte à côte
Nous pouvons résoudre le problème de ne pas afficher côte à côte en définissant un attribut float sur le div, tant que vous Si la largeur totale des boîtes div côte à côte est inférieure ou égale à la largeur de la boîte la plus à l'extérieur, plusieurs objets div peuvent être affichés côte à côte.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 200px;
border: 1px solid red;
float: left;
}
</style>
</head>
<body>
<div>div测试文本！</div>
<div>div测试文本！</div>
</body>
</html>Rendu :
L'attribut float définit dans quelle direction l'élément flotte. Historiquement, cette propriété a toujours été appliquée aux images, provoquant l'enroulement du texte autour de l'image, mais en CSS, n'importe quel élément peut flotter. Un élément flottant crée une boîte au niveau du bloc, quel que soit le type d'élément dont il s'agit.
Si des éléments flottants non remplacés, spécifiez une largeur explicite ; sinon, ils sont rendus aussi étroits que possible ;
Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !
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!