0
votes

Quelqu'un peut-il s'il vous plaît dites-moi comment je suis capable de produire des divs dans la même rangée, même s'ils sont des éléments bloquants?

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 xxx

voici mon code CSS xxx

 Ceci est la sortie


2 commentaires

Le positionnement est un très 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


Veuillez vérifier ma réponse présente ci-dessous


3 Réponses :


0
votes

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 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)

p>

<div class="flex-parent">
<div class="red">
</div>

<div class="blue">
</div>

<div class="yellow">
</div>
</div>


2 commentaires

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



0
votes

Modifier l'ordre de pour atteindre [(1) bleu (2) jaune (3) rouge] résultat

Vous pouvez simplement ajouter 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>

avec Affichage: Inline-Block ; fort> p>

p>

<div class="blue">
</div>

<div class="yellow">
</div>

<div class="red">
</div>


1 commentaires

Si vous pensez que j'ai pu répondre à votre requête, acceptez bien ma réponse ... c'est tout !!



0
votes

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 pour atteindre l'objectif. Il existe 5 types de positions dans CSS qui sont

statique relatif absolu fixe collant

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.

Vous pouvez étudier plus sur ces ici

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.

J'espère que cela efface votre requête.


0 commentaires