0
votes

Comment afficher l'élément à droite entre les éléments utilisant CSS

J'ai l'élément 1, élément 2, élément 3 sur mai Page, comment puis-je placer Element3 fort> sur le dessus droit ci-dessous Element1 Strong> en haut en haut? Cela devrait ressembler à l'écran ci-dessous: Entrez la description de l'image ici

J'ai lu beaucoup d'exemples, mais cela n'a pas fonctionné pour moi, J'ai essayé d'utiliser p>

position: absolu; Flotter à droite; code> p>

avec position: Absolutel Il place cet élément sur le haut de la page mais je ne le veux pas, Le maximum que j'ai obtenu la position du bas droit Entrez la description de l'image ici Aussi, j'ai essayé d'utiliser: p> xxx pré>

Cela n'a pas aidé ni, tout en minimisant les fenêtres, il devient un gâchis: Entrez la description de l'image ici P>

Aidez-moi à résoudre ce problème? P>

édité: 1999.19.1600 +, 8 fort> est .hero-fait-titre code>, fondé à Helsinki, bureaux, indigènes numériques, studios de design strong> est .hero-faits-description code>, . Sommaire code> est-ce TEXT STRUT> Je veux également déplacer aussi Element3 strong>. P>

<div className="fact-wrapper">
    {facts.map(obj => {
      return (
        <div>
          <div className="fact-wrapper__hero-fact-title">{obj.title}</div>
          <div className="fact-wrapper__hero-fact-descriptio">
            {obj.description}
          </div>
        </div>
      )
    })}
  </div>
  <h2 className="fact-summary">{factSummary}</h2>


2 commentaires

S'il vous plaît poster le code de ce que vous avez fait jusqu'à présent


@Zuber j'ai ajouté le code ci-dessous


3 Réponses :


1
votes

Vous pouvez utiliser Flexbox, donner flex-base: 100% code> au premier élément, par exemple

p>

<main>
  <div class="e1">element 1</div>
  <div class="e2">element 2 <br /><br />Lot of text</div>
  <div class="e3">element 3</div>
</main>


0 commentaires

2
votes

Utilisez flexbox

p>

<div class="container">
  <div class="top">
    <div class="box box-one">box one</div>
  </div>
  <div class="bottom">
    <div class="box box-two">box two</div>
    <div class="box box-three">box three</div>
  </div>
</div>


0 commentaires

1
votes

Je vous proposerais d'utiliser Flex.

En gros, vous avez ici deux lignes. La première ligne est une simple div. La deuxième ligne est une combinaison de deux divs côte à côte.

Il existe plusieurs options pour les placer côte à côte, mais il est généralement meilleur pour les modifications futures d'utiliser Flex.

Pour le faire fonctionner, vous devez 1. Ajouter "Affichage: Flex" au parent div. 2. Ajouter "Flex-Grow: 1" Style aux enfants. C'est tout.

flex-poussculez définit la capacité d'un élément de flexion à se développer si nécessaire. xxx

Exemple: < Un href = "https://codepen.io/tony-freed/full/vyoryve" rel = "nofollow noreferrer"> https://codepen.io/tony-freed/full/vyoryve

Vous pouvez en apprendre davantage à ce sujet ici: https: // css-tricks.com/snippets/css/a-guide-a-flexbox/


0 commentaires