web-dev-qa-db-fra.com

Positionnez div en bas d'un div différent, sans utiliser Absolute

J'ai un div dans un autre div. La division interne a des marges de 0, auto pour le centraliser. Cependant, je ne peux pas le faire flotter au fond sans le rendre absolu. Est-il possible de faire flotter une div relative au bas d'une div normale? 

htmlcssimagecss-floatrelative
12
user3506938

Sans utiliser position: absolute, vous devrez l'aligner verticalement.

Vous pouvez utiliser vertical-align: bottom qui, selon les docs :

La propriété CSS vertical-align spécifie l'alignement vertical d'une zone inline ou table-cell.

Donc, soit définir la div externe en tant qu’élément inline, ou en tant que table-cell:

#outer {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: bottom;
}

#inner {
  border: 1px solid green;
  height: 50px;
}
<div id="outer">
  <div id="inner">
  </div>
</div>

14
LcSalazar

De nos jours, vous pouvez simplement utiliser display: flex pour tous ces problèmes d'alignement. 

Dans votre cas, vous pouvez simplement faire en sorte que le parent soit flex, direction-variable column (la valeur par défaut est row) et justify-content: flex-end. L'avantage de cette approche est que cela fonctionne également si vous avez plusieurs éléments dans le parent.

Si vous en avez plusieurs et que vous souhaitez les aligner du début à la fin du parent, vous pouvez remplacer justify-content par une autre propriété, telle que space-between ou space-evenly.

#outer {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

#inner {
  border: 1px solid green;
  height: 50px;
}
<div id="outer">
  <div id="inner">
  </div>
</div>

4
Obed Marquez Parlapiano

Ajoutez ce style à la div interne.

position: relative;
top: 100%;
transform: translateY(-100%);
1
wizzfizz94

Le seul moyen que j'ai trouvé, à moins que votre contenu ne soit statique, a été de le faire avec jquery comme suit:

$(document).ready(function(){
  inner_height = $('#inner-div').height();
  outer_height = $('#outer-div').height();
  margin_calc = (outer_height - inner_height)
  $('#inner-div').css('margin-top', (margin_calc+'px'));
});

Cela fonctionnera pour un div-colonne dans un div-conteneur, si la hauteur d'une autre colonne est plus grande. 

Il est incroyable que cette chose simple ne soit pas "construite" via une propriété css (c'est-à-dire "float: bottom"), cela ne casse pas le reste avec des absolus, etc.

0
JosephK