web-dev-qa-db-fra.com

Aligner le bouton au bas de la div en utilisant CSS

Je veux aligner mon bouton dans le coin inférieur droit de mon div. Comment puis je faire ça?

enter image description here

Css actuel de div:

    float: right;
    width: 83%;
    margin-right: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height:625px;
    overflow:auto;
cssbuttonalignment
91
Harry Joy

Vous pouvez utiliser position:absolute; pour positionner de manière absolue un élément dans un div parent. Lorsque vous utilisez position:absolute;, l'élément sera positionné de manière absolue par rapport à la première div positionnée. S'il ne parvient pas à en trouver, il se positionnera absolument depuis la fenêtre. Vous devrez donc vous assurer que la div de contenu est positionnée.

Pour que le contenu soit positionné, toutes les valeurs position qui ne sont pas statiques fonctionneront, mais relative est la plus simple car elle ne modifie pas le positionnement des divs par lui-même.

Donc, ajoutez position:relative; à la div de contenu, supprimez le float du bouton et ajoutez le CSS suivant au bouton:

position: absolute;
right:    0;
bottom:   0;
187
Kokos

CSS3 flexbox peut également être utilisé pour aligner le bouton en bas de l'élément parent.

HTML requis: 

<div class="container">
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

CSS nécessaire: 

.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}

Capture d'écran:

Output Image

Ressources utiles: 

* {box-sizing: border-box;}
body {
  background: linear-gradient(orange, yellow);
  font: 14px/18px Arial, sans-serif;
  margin: 0;
}
.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
  padding: 10px;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}
.container .btn-holder button {
  padding: 10px 25px;
  background: blue;
  font-size: 16px;
  border: none;
  color: #fff;
}
<div class="container">
  <p>Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... </p>
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>
25
Mohammad Usman

Le conteneur parent doit avoir ceci:

position: relative;

Le bouton lui-même doit avoir ceci:

position: relative;
bottom: 20px;
right: 20px;

ou ce que vous aimez

9
Aron