Maison > Article > interface Web > Comment afficher deux paragraphes côte à côte en CSS
Comment afficher deux paragraphes côte à côte en CSS
- WBOYoriginal
- 2021-12-03 09:26:565309parcourir
En CSS, vous pouvez utiliser l'attribut float pour afficher deux éléments côte à côte. Cet attribut est utilisé pour définir la direction de flottement de l'élément. Lorsque la valeur de l'attribut est "left", l'élément flotte vers la gauche, affichant ainsi les éléments côte à côte. La syntaxe est " Element{float:left;}".
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Comment afficher deux paragraphes côte à côte en CSS
Vous pouvez utiliser l'attribut float pour définir uniformément le flotteur vers la gauche pour afficher deux paragraphes d'éléments côte à côte. Lorsque la valeur de l'attribut est à gauche, l'élément flotte vers la gauche. 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 seront aussi étroits que possible ;
Remarque : s'il y a très peu d'espace pour un élément flottant sur une ligne, alors l'élément passera à la ligne suivante et ce processus se poursuivra jusqu'à ce qu'une certaine ligne dispose de suffisamment d'espace.
L'exemple est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p{
width:200px;
height:100px;
float:left;
}
</style>
</head>
<body>
<p>这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</p>
<p>这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段</p>
</body>
</html>Résultat de sortie :
(Partage de vidéos 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!