On m'a demandé de produire mes divs de manière horizontale (rouge jaune bleu). Cependant, j'ai réalisé que j'ai pu le faire sans changer la propriété d'affichage. Quelqu'un peut-il me dire comment cela est possible?
Voici mon code HTML
3 Réponses :
Une façon de le faire est d'ajouter un parent div et d'utiliser Flex-Box pour les obtenir en ligne à l'aide de p> flex-direction: la ligne code> (Wich est par défaut, vous ne devez donc pas la définir par défaut Pour obtenir une rangée d'éléments)
<div class="flex-parent">
<div class="red">
</div>
<div class="blue">
</div>
<div class="yellow">
</div>
</div>
La question ne concerne pas comment atteindre, OP a besoin d'explication sur le comportement actuel.
Op a demandé comment c'est possible, bien comme celui-ci
Modifier l'ordre de pour atteindre [(1) bleu (2) jaune (3) rouge] résultat
Vous pouvez simplement ajouter avec Affichage: Inline-Block ; fort> p> p> float code> Propriété qui vous obtiendra le résultat souhaité sans changement de
Afficher les propriétés CODE> ou vous pouvez même utiliser
Affichage: Inline-Block; Code> pour les résultats souhaités ... P>
<div class="blue">
</div>
<div class="yellow">
</div>
<div class="red">
</div>
Si vous pensez que j'ai pu répondre à votre requête, acceptez bien ma réponse ... c'est tout !!
Si vous souhaitez connaître le comportement du code que vous avez ajouté avec la question, ce que vous avez fait, c'est utilisé la position de la position CSS Et si vous définissez une personne de ces propriétés sur un élément HTML, vous pouvez contrôler sa position à l'aide de coordonnées à gauche, à droite, en haut et en bas. P>
Vous pouvez étudier plus sur ces ici P>
Mais ce n'est pas la meilleure pratique pour les utiliser pour positionner des éléments de position sauf si cela n'est requis par le flux et ne peut pas être atteint par d'autres méthodes, comme dans votre code, vous pouvez facilement obtenir le résultat à l'aide de CSS Flexbox, ici est une excellente ressource pour étudier Flexbox. P>
J'espère que cela efface votre requête. P> CODE> pour atteindre l'objectif. Il existe 5 types de positions code> dans CSS qui sont p>
statique code>
relatif code>
absolu code>
fixe code>
collant code> p>
Le positionnement est un très b> Mauvaise méthode de mise en place de pages Web. Il est extrêmement inflexible et il y a beaucoup de meilleures options et plus réactives. Découvrez LearnLayOut.com B>
Veuillez vérifier ma réponse présente ci-dessous