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:
J'ai lu beaucoup d'exemples, mais cela n'a pas fonctionné pour moi,
J'ai essayé d'utiliser 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
Cela n'a pas aidé ni, tout en minimisant les fenêtres, il devient un gâchis:
Aidez-moi à résoudre ce problème? P> édité:
1999.19.1600 +, 8 fort> est
position: absolu;
Flotter à droite;
code> p>
Aussi, j'ai essayé d'utiliser: p>
P>
.hero-fait-titre code>,
fondé à Helsinki, bureaux, indigènes numériques, studios de design strong> est
.hero-faits-description code>,
. Sommaire code> est-ce
<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>
3 Réponses :
Vous pouvez utiliser Flexbox, donner p> flex-base: 100% code> au premier élément, par exemple
<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>
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>
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. P>
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. P>
Pour le faire fonctionner, vous devez 1. Ajouter "Affichage: Flex" au parent div. 2. Ajouter "Flex-Grow: 1" Style aux enfants. C'est tout. P>
flex-poussculez définit la capacité d'un élément de flexion à se développer si nécessaire. P> Exemple: strong> < Un href = "https://codepen.io/tony-freed/full/vyoryve" rel = "nofollow noreferrer"> https://codepen.io/tony-freed/full/vyoryve p> Vous pouvez en apprendre davantage à ce sujet ici: https: // css-tricks.com/snippets/css/a-guide-a-flexbox/ p> p>
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