Comment afficher deux paragraphes côte à côte en CSS-tutoriel CSS-php.cn

Comment afficher deux paragraphes côte à côte en CSS

WBOY

Libérer： 2021-12-03 09:26:56

original

5381 Les gens l'ont consulté

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;}".

Comment afficher deux paragraphes côte à côte en CSS

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>

Copier après la connexion

Résultat de sortie :

Comment afficher deux paragraphes côte à côte en CSS