Maison  >  Article  >  interface Web  >  Pourquoi CSS Div s'affiche-t-il sans emballage ?

Pourquoi CSS Div s'affiche-t-il sans emballage ?

青灯夜游
青灯夜游original
2021-04-28 15:07:0010917parcourir

Comment afficher un div CSS sans retour à la ligne : 1. Ajoutez le style "display:inline;" ou "display:inline-block;" à l'élément div et convertissez l'élément div en un élément en ligne ou un élément de bloc en ligne. 2. Ajoutez le style « float:left; » à l'élément div.

Pourquoi CSS Div s'affiche-t-il sans emballage ?

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

En HTML, div est un élément de bloc. L'attribut de style par défaut de la boîte div elle-même est d'occuper une ligne exclusive. Il existe généralement deux façons de résoudre le problème de l'occupation d'une ligne exclusive :

.
  • One Définissez un style d'affichage et convertissez-le en un élément en ligne ou un élément de bloc en ligne.

  • Une façon de définir le flottement

Méthode 1 : Utiliser l'affichage CSS pour afficher côte à côte

us L'ajout de display:inline ou display:inline-block pour convertir des éléments div en éléments en ligne ou en éléments de bloc en ligne peut résoudre le problème de l'affichage des objets de boîte div côte à côte.

Caractéristiques des éléments en ligne :

1 Sur la même ligne que les autres éléments

2. La hauteur, la hauteur de ligne, les marges supérieure et inférieure ne sont pas autorisées. Modifier ;

3. La largeur est la largeur de son texte ou de son image et ne peut pas être modifiée.

Caractéristiques des éléments de bloc en ligne :

1. Pas de retour à la ligne automatique

2. Capable de reconnaître la largeur et la hauteur

3. de gauche à droite

Exemple :

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			div {
				display: inline;
				border: 1px solid red;
			}
		</style>
		<title></title>
	</head>

	<body>
		<div>第一个div</div>
		<div>第二个div</div>
		<div>第三个div</div>
		<div>第四个div</div>
	</body>

</html>

Rendu :

Pourquoi CSS Div saffiche-t-il sans emballage ?

Méthode 2 : Utiliser CSS float pour afficher côte à côte

Les éléments flottants s'éloignent du flux de documents standard et suppriment les restrictions des éléments de niveau bloc et des éléments en ligne.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			div {
				float: left;
				border: 1px solid red;
			}
		</style>
		<title></title>
	</head>

	<body>
		<div>第一个div</div>
		<div>第二个div</div>
		<div>第三个div</div>
		<div>第四个div</div>
	</body>

</html>

Rendu :

Pourquoi CSS Div saffiche-t-il sans emballage ?

(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!

Déclaration:
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