28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de positionnement

Bonjour, j'aimerais placer une balise <button> en bas à droite de son parent. Cependant, malgré plusieurs tentatives, n'a réussi. Lorsque j'utilise position: absolute, la balise sort de son parent. Et la propriété justify-content ne me permet que de mettre la balise au centre. Est-ce que quelqu'un pourrais m'aider à trouver une solution ? Merci d'avance pour votre aide.

Voici mon HTML et mon CSS :
<main>
            <div class="about">
                <h2>About</h2>
                <p class="txt-about">Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
                <div class="about-link">
                    <button>En savoir plus</button>
                </div>
            </div>
        </main>


.about {
  background: black;
  color: white;
  width: 100%;
  height: max-content;
  margin-top: 50px;
}

h2 {
  margin-left: 25px;
  font-size: 2rem;
}

.txt-about {
  margin: 10px 25px;
  text-align: justify;
}

.about-link {
  display: flex;
  justify-content: right;
}

button {
  border: 2px solid white;
  background: black;
  color: white;
}

Modifié par Yuuno (10 Aug 2021 - 17:52)
Modérateur
Bonjour !

Alors tu as plusieur solutions :

- Pour garder flex il faut mettre justify-content: flex-end; (et non pas right Smiley smile )
.about-link {
  display: flex;
  justify-content: flex-end;
}


- tu peux te passer de flex et justify-content avec un simple text-align: right; ton bouton agira comme du texte aligné a droite
.about-link {
  text-align: right;
}


- pour l'absolute (pas recommandé ici) : un élément en absolute se positionne par rapport a son dernier parent positionné. Donc si tu veux que le bouton en absolute se positionne par rapport a .about-link il faut rajouter une position:relative; sur .about-link (mais ca restera galère a positionner car il manquera de l'espace etc etc)
.about-link {
  position: relative;
}
button {
  position: absolute;
  bottom: 0;
 right:0;
}


Bonne journée !
Smiley smile
Modifié par _laurent (11 Aug 2021 - 08:38)
Meilleure solution
Sujet clos
Aller à