Aligner les DIV sur le bas ou la ligne de base

Question

Aligner les DIV sur le bas ou la ligne de base

Demandé el 6 de Janvier, 2010: Quand la question a-t-elle été
84149 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

son été un moment depuis que j'ai eu à faire les grands de travail css, donc im coincé

im essayant d'aligner un enfant balise div en bas ou de base de la société mère balise div.

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;
}

Tout ce que je veux faire est d'avoir l'enfant Div à la basline de la Div Parent, voici à quoi il ressemble maintenant...

Note je vais avoir plusieurs childDiv et ils peuvent tous varier en hauteur, et les malades ont besoin de tous pour s'aligner sur la ligne de base/bas.

Merci à tous pour l'aide

Demandé el 6 de Janvier, 2010 par sia

Answer 1

4 Réponses

Answer 2

181voto

Y. Shoham Points 3389

Vous devez ajouter ceci:

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

Lors de la déclaration de absolute élément, il a positionné en fonction de son parent le plus proche une valeur autre que static (c'est-à-dire absolute , relative ou fixed ).

Répondu el 6 de Janvier, 2010 par Y. Shoham (3389 Points )

Answer 3

13voto

romiem Points 836

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

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 de JSBin ici: http://jsbin.com/INOnAkuF/2/edit

La démo contient également un exemple montrant comment centrer verticalement en utilisant la même technique.

Répondu el 29 de Novembre, 2013 par romiem (836 Points )

Answer 4

7voto

pstanton Points 8807

cela fonctionne (j'ai seulement testé 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.

Répondu el 6 de Janvier, 2010 par pstanton (8807 Points )

Answer 5

3voto

Ravia Points 4797

Vous auriez probablement à paramétrer la div de l'enfant pour avoir position: absolute .

Mettez à jour votre style pour

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

Répondu el 6 de Janvier, 2010 par Ravia (4797 Points )

Aligner les DIV sur le bas ou la ligne de base

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Aligner les DIV sur le bas ou la ligne de base

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: