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 childDiv
s avec des hauteurs variables, et j'en aurai tous besoin pour s'aligner sur la ligne de base / le bas.
absolute
positionnement en fonction du parent.Réponses:
Vous devez ajouter ceci:
Lors de la déclaration d'
absolute
élément, il est positionné en fonction de son parent le plus proche qui ne l'est passtatic
(il doit êtreabsolute
,relative
oufixed
).la source
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: column
le div parent (également illustré dans ce violon ):la source
align-items: flex-start;
si vous ne souhaitez pas étirer les articles.Utilisez les valeurs d'affichage CSS de table et table-cell:
HTML
CSS
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.
la source
cela fonctionne (je n'ai testé que ie & ff):
J'espère que cela pourra aider.
la source
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
HTML
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.
la source
Vous devrez probablement définir le div enfant à avoir
position: absolute
.Mettez à jour votre style enfant pour
la source
Un vieux post mais je pensais que je partagerais une réponse pour tous ceux qui recherchent. Et parce que lorsque vous utilisez, les
absolute
choses peuvent mal tourner. Ce que je ferais c'estHTML
Le Css
Et cela ramènerait simplement ce div inférieur dans le div parent. sans danger pour la plupart des navigateurs aussi
la source
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).
la source
C'est ma solution
la source
Si vous avez plusieurs Div enfants dans votre Div parent, vous pouvez utiliser la propriété d'alignement vertical comme ci-dessous:
la source