Aligner les DIV sur le bas ou la ligne de base

95

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.

sia
la source
ne pensait même pas! Je viens de supprimer la hauteur sur le parentDiv et tous les childDiv sont maintenant assis sur la ligne de base. im juste un sally idiot!
sia
Mais si vous voulez qu'il ait une hauteur spécifique, vous devez utiliser le absolutepositionnement en fonction du parent.
Y. Shoham

Réponses:

154

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).

Y. Shoham
la source
7
Je doute que cela fasse ce qu'il veut, actuellement, cela positionnera tout (on dirait qu'il y aura plusieurs éléments enfants s'il s'agit d'un histogramme dynamique) les uns sur les autres.
crmepham
52

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
}
gcbenison
la source
1
Facile. Exactement ce que je voulais. À utiliser align-items: flex-start;si vous ne souhaitez pas étirer les articles.
Madhan
C'est la meilleure réponse de nos jours!
Rens Groenveld le
12

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.

romiem
la source
1
Pour autant de merde que les tables obtiennent, c'est parfois la meilleure solution
Sean256
c'était la meilleure solution pour moi
bowlerae
C'est vraiment la meilleure solution, car l'utilisation d'éléments positionnés de manière absolue modifie généralement la hauteur de l'élément parent
hamncheez
7

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.

pstanton
la source
5

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>

Exemple

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.

Nick Gillard
la source
3

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;
}
Ravia
la source
J'ai essayé cela, mais ce dont j'ai besoin, c'est que le bas du childDiv soit assis au bas du parentDiv, le graphique doit être dynamique, et les hauteurs varieront d'un enfantDiv à l'autre ... le positionnement peut fonctionner mais je n'ai pas Quitter compris quelque chose qui est solide ...
sia
5
pas une bonne idée de mettre le haut à 207 (un nombre arbitraire) mieux vaut mettre le bas: 0
pstanton
2

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


la source
Cela ferait la moitié de childDiv au bas de parentDiv. Vous devez utiliser au moins -40px sur le haut de la marge. C'est aussi la meilleure pratique d'utiliser la position: relative; dans ce cas pour les deux div.
Augus
1

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).

cellepo
la source
0

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>

C'est ma solution

NEM
la source
-6

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;
}
Pawan
la source
Pourquoi tant de votes négatifs pour cela sans commentaires? Cela ne résout-il pas le problème? Des recherches en ligne suggèrent qu'il le devrait.
sholsapp