Conseil: Selon la raison pour laquelle vous souhaitez interrompre une div, vous pouvez également envisager d’utiliser une balise, qui est un élément de niveau en ligne et qui ne passe pas à la ligne suivante à moins que son comportement par défaut ne soit modifié.
Remarque: pour que ces exemples soient plus faciles à utiliser et à comprendre pour tous les types d’utilisateurs, nous utilisons l’attribut style de la div. Si vous envisagez d'utiliser l'un de ces exemples sur plusieurs pages, nous vous recommandons vivement de créer un fichier CSS pouvant être mis en cache avec les paramètres de style qu'il contient.
Dans nos exemples ci-dessous, nous montrerons les divs sous différentes couleurs pour illustrer l’espacement de la div et l’emplacement de la div sur l’écran.
Comportement par défaut
Vous trouverez ci-dessous un exemple du comportement div par défaut de l’élément de bloc Div un qui occupe la première ligne de son élément conteneur suivi du deuxième Div .
Div un
Div deux
Div un div deux
Même si vous réduisiez la taille d'une div pour faire de la place à l'autre, parce que ce sont des éléments de bloc, il vous resterait un espace à côté de Div un et de deux sous Div . Pour déplacer le div jusqu'à la ligne suivante, les deux divs doivent disposer du paramètre d'affichage de bloc en ligne, comme indiqué ci-dessous.
Div un
Div deux
Div un div deux
Vous trouverez ci-dessous quelques exemples de div en trois colonnes. Premièrement, les trois colonnes ci-dessous div suivent la même idée que les exemples ci-dessus, sauf qu’il ajoute un div.
Div un
Div deux
Div trois
Div un Div deux Div trois
Bien sûr, si vous voulez que les div occupent 100% de l'élément conteneur, cela devient un peu plus compliqué. Vous trouverez ci-dessous un exemple de création de trois divisions adjacentes occupant 100% de l’élément. Dans l'exemple ci-dessous, au lieu de garder toutes les div sur la même ligne en utilisant inline-block, nous flottons les div gauche et droite.
Div un
Div trois
Div deux
Div un div trois
Conseil: Bien que l'exemple ci-dessus d'une colonne à trois divisions soit une personnalisation supplémentaire réactive, telle que masquer la division Trois et ajuster les largeurs peut également être ajoutée au style.