Quel est le CSS pour faire quelque chose aller à la ligne suivante dans la page? [fermé]
Comment puis-je positionner automatiquement un élément sur une nouvelle ligne de la page? En HTML, je pourrais utiliser <br>, mais comment puis-je 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>
La portée 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 puis-je déplacer l'un des <div>s sur un nouvelle ligne pour créer une nouvelle ligne?
3 réponses
Il y a deux options auxquelles je peux penser, mais sans plus de détails, je ne peux pas être sûr de ce qui est le mieux:
#elementId {
display: block;
}
Cela va forcer l'élément à une "nouvelle ligne" si, il n'est pas sur la même ligne que flottait un élément.
#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 ne forcera, pour autant que je sache, une 'nouvelle ligne', comme ceux-ci les éléments sont supprimés du flux normal du document.
Afficher l'élément sous forme de bloc:
display: block;
Cela dépend pourquoi le quelque chose est sur la même ligne en premier lieu.
clear dans le cas des flotteurs, display: block dans le cas du contenu en ligne qui coule naturellement, rien ne vaincra position: absolute car l'élément précédent sera retiré du flux normal par celui-ci.