web-dev-qa-db-fra.com

Quel est le CSS pour faire passer quelque chose à la ligne suivante de la page?

Comment puis-je positionner automatiquement un élément sur une nouvelle ligne de la page? En HTML, je pourrais utiliser <br>, mais comment ajouter quelque chose comme un saut de ligne en CSS?

Disons que j'ai le code suivant par exemple:

<p>Lorem ipsum dolor sit amet,
   <span id="elementId">consectetur adipisicing elit.</span>
   Magni totam velit ex delectus fuga fugit</p>

L'envergure est toujours positionnée sur la même ligne que le reste du texte. Comment puis-je déplacer le texte span sur une nouvelle ligne uniquement via CSS?

Un autre exemple est lorsque vous utilisez display: inline-block ou float:

<div class="smalldiv">Lorem ipsum dolor sit amet</div>
<div class="smalldiv">Lorem ipsum dolor sit amet</div>
<div class="smalldiv" id="elementId">Lorem ipsum dolor sit amet</div>
<div class="smalldiv">Lorem ipsum dolor sit amet</div>

.smalldiv {
    display: inline-block; // OR
    float: left;
}

Comment déplacer l'un des <div>s sur une nouvelle ligne pour créer une nouvelle ligne?

csspositioning
36
Justin Meltzer

Il y a deux options auxquelles je peux penser, mais sans plus de détails, je ne peux pas être sûr de la meilleure:

#elementId {
    display: block;
}

Cela forcera l'élément à une "nouvelle ligne" si ce n'est pas sur la même ligne qu'un élément flottant.

#elementId {
     clear: both;
}

Cela forcera l'élément à effacer les flotteurs et à passer à une "nouvelle ligne".

Dans le cas où l'élément est sur la même ligne qu'un autre qui a position de fixed ou absolute rien, à ma connaissance, ne forcera une 'nouvelle ligne, 'lorsque ces éléments sont supprimés du flux normal du document.

73
David Thomas

Faire afficher l'élément en bloc:

display: block;
7
Mårten Wikström

Cela dépend pourquoi le quelque chose est sur la même ligne en premier lieu.

clear dans le cas de flottants, display: block dans le cas d'un contenu en ligne qui coule naturellement, rien ne vaincra position: absolute car l'élément précédent sera retiré du flux normal par lui.

4
Quentin