Aligner les DIV sur le bas ou la ligne de base

Question 1

J'essaie d'aligner une balise div enfant au bas ou à la ligne de base de la balise div parent.

Tout ce que je veux faire est d'avoir la Div enfant à la base de la Div Parent, voici à quoi elle ressemble maintenant:

HTML

<div id="parentDiv">
<div class="childDiv"></div>
</div>

CSS

#parentDiv
{
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}
#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
}

Remarque

J'aurai plusieurs childDivs avec des hauteurs variables, et j'en aurai tous besoin pour s'aligner sur la ligne de base / le bas.

Question 2

Vous devez ajouter ceci:

#parentDiv {
  position: relative;
}

#parentDiv .childDiv {
  position: absolute;
  bottom: 0;
  left: 0;
}

Lors de la déclaration d' absoluteélément, il est positionné en fonction de son parent le plus proche qui ne l'est pas static(il doit être absolute, relativeou fixed).

Question 3

Sept ans plus tard, les recherches d'alignement vertical soulèvent toujours cette question, je publierai donc une autre solution dont nous disposons maintenant: le positionnement de la flexbox. Il suffit de définir display:flex; justify-content: flex-end; flex-direction: columnle div parent (également illustré dans ce violon ):

#parentDiv
{
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}

Question 4

Utilisez les valeurs d'affichage CSS de table et table-cell:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,body {
    width: 100%;
    height: 100%;
}
.valign {
    display: table;
    width: 100%;
    height: 100%;
}
.valign > div {
    display: table-cell;
    width: 100%;
    height: 100%;
}
.valign.bottom > div {
    vertical-align: bottom;
}

J'ai créé une démo JSBin ici: http://jsbin.com/INOnAkuF/2/edit

La démo a également un exemple comment aligner verticalement au centre en utilisant la même technique.

Question 5

cela fonctionne (je n'ai testé que ie & ff):

<html>
<head>
    <style type="text/css">
        #parent {
            height: 300px;
            width: 300px;
            background-color: #ccc;
            border: 1px solid red;
            position: relative;
        }
        #child  {
            height: 100px;
            width: 30px;
            background-color: #eee;
            border: 1px solid green;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="parent">parent
        <div id="child">child</div>
    </div>
    outside
</body>
</html>

J'espère que cela pourra aider.

Question 6

La réponse publiée par Y. Shoham (en utilisant le positionnement absolu) semble être la solution la plus simple dans la plupart des cas où le conteneur a une hauteur fixe, mais si le DIV parent doit contenir plusieurs DIV et ajuster automatiquement sa hauteur en fonction du contenu dynamique, alors il peut y avoir un problème. J'avais besoin de deux blocs de contenu dynamique; un aligné vers le haut du conteneur et un vers le bas et bien que je puisse ajuster le conteneur à la taille du DIV supérieur, si le DIV aligné en bas était plus grand, il ne redimensionnerait pas le conteneur mais s'étendrait à l'extérieur . La méthode décrite ci-dessus par romiem utilisant le positionnement de style table, bien qu'un peu plus compliquée, est plus robuste à cet égard et a permis un alignement vers le bas et une hauteur automatique correcte du conteneur.

CSS

#container {
        display: table;
        height: auto;
}

#top {
    display: table-cell;
    width:50%;
    height: 100%;
}

#bottom {
    display: table-cell;
    width:50%;
    vertical-align: bottom;
    height: 100%;
}

HTML

<div id=“container”>
    <div id=“top”>Dynamic content aligned to top of #container</div>
    <div id=“bottom”>Dynamic content aligned to botttom of #container</div>
</div>

Je me rends compte que ce n'est pas une nouvelle réponse mais je voulais commenter cette approche car elle m'a amené à trouver ma solution mais en tant que débutant, je n'étais pas autorisé à commenter, seulement poster.

Question 7

Vous devrez probablement définir le div enfant à avoir position: absolute.

Mettez à jour votre style enfant pour

#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
  position:absolute;
  top:207px;
}

Question 8

Un vieux post mais je pensais que je partagerais une réponse pour tous ceux qui recherchent. Et parce que lorsque vous utilisez, les absolutechoses peuvent mal tourner. Ce que je ferais c'est

HTML

<div id="parentDiv"></div>
<div class="childDiv"></div>

Le Css

parentDiv{

}
childDiv{
    height:40px;
    margin-top:-20px;
}

Et cela ramènerait simplement ce div inférieur dans le div parent. sans danger pour la plupart des navigateurs aussi

Question 9

J'avais quelque chose de similaire et je l'ai fait fonctionner en ajoutant efficacement un rembourrage à l'enfant.

Je suis sûr que certaines des autres réponses ici permettraient d'arriver à la solution, mais je n'ai pas pu les faire fonctionner facilement après beaucoup de temps; Je me suis plutôt retrouvé avec la solution padding-top qui est élégante dans sa simplicité, mais qui me semble un peu hackish (sans parler de la valeur de pixel qu'elle définit dépendrait probablement de la hauteur du parent).

Question 10

td {
  height: 150px;
  width: 150px;
  text-align: center;
}

b {
  border: 1px solid black;
}

.child-2 {
  vertical-align: bottom;
}

.child-3 {
  vertical-align: top;
}

<table border=1>
  <tr>
    <td class="child-1">
      <b>child 1</b>
    </td>
    <td class="child-2">
     <b>child 2</b>
    </td>
    <td class="child-3">
      <b>child 3</b>
    </td>
  </tr>
</table>

Développer l'extrait

C'est ma solution

Question 11

Si vous avez plusieurs Div enfants dans votre Div parent, vous pouvez utiliser la propriété d'alignement vertical comme ci-dessous:

.Parent div
{
  vertical-align : bottom;
}