Alinhar DIVs para o fundo ou linha de base

94

Estou tentando alinhar uma tag div filha à parte inferior ou linha de base da tag div pai.

Tudo que eu quero fazer é ter o Div filho na linha de base do Div pai, eis a aparência dele agora:

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

Nota

Terei vários childDivs com alturas variadas e precisarei de todos eles para alinhar à linha de base / fundo.

html css

— sia
fonte

nem estava pensando! Acabei de remover a altura no parentDiv e todos os childDiv agora estão na linha de base. eu sou apenas uma sally boba!

— sia

Mas se você quiser que ele tenha uma altura específica - você deve usar o absoluteposicionamento de acordo com o pai.

— Y. Shoham

154

Você precisa adicionar isto:

#parentDiv {
  position: relative;
}

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

Ao declarar um absoluteelemento, ele é posicionado de acordo com seu pai mais próximo que não é static(deve ser absolute, relativeou fixed).

— Y. Shoham
fonte

7

Duvido que isso faça o que ele deseja, atualmente isso irá posicionar todos (parece que haverá vários elementos filho se for um gráfico de barras dinâmico) uns sobre os outros.

— crmepham

50

Sete anos depois, as buscas por alinhamento vertical ainda trazem essa questão, então postarei outra solução que temos à nossa disposição agora: o posicionamento do flexbox. Basta definir display:flex; justify-content: flex-end; flex-direction: columnno div pai (demonstrado neste violino também):

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

— gcbenison
fonte

1

Simples. Exatamente o que eu queria. Use align-items: flex-start;se você não quiser esticar os itens.

— Madhan,

Esta é a melhor resposta hoje em dia!

— Rens Groenveld

12

Use os valores de exibição CSS da tabela e da célula da tabela:

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

Criei uma demonstração JSBin aqui: http://jsbin.com/INOnAkuF/2/edit

A demonstração também tem um exemplo de como centralizar verticalmente o alinhamento usando a mesma técnica.

— Romiem
fonte

1

Para o máximo de merda que as mesas recebem, às vezes esta é a melhor solução

— Sean256

esta foi a melhor solução para mim

— bowlerae de

Esta é realmente a melhor solução, já que o uso de elementos posicionados de forma absoluta normalmente altera a altura do elemento pai

— hamncheez

7

isso funciona (eu só testei 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>

espero que ajude.

— pstanton
fonte

5

A resposta postada por Y. Shoham (usando posicionamento absoluto) parece ser a solução mais simples na maioria dos casos onde o contêiner tem uma altura fixa, mas se o DIV pai tiver que conter vários DIVs e ajustar automaticamente sua altura com base no conteúdo dinâmico, então pode haver um problema. Eu precisava ter dois blocos de conteúdo dinâmico; um alinhado ao topo do contêiner e um ao fundo e embora eu pudesse fazer o contêiner se ajustar ao tamanho do DIV superior, se o DIV alinhado ao fundo fosse mais alto, ele não redimensionaria o contêiner, mas se estenderia para fora . O método descrito acima por romiem usando o posicionamento de estilo de mesa, embora um pouco mais complicado, é mais robusto a esse respeito e permitiu o alinhamento com o fundo e a altura automática correta do contêiner.

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>

Sei que não é uma resposta nova, mas queria comentar sobre essa abordagem, pois me levou a encontrar minha solução, mas como um novato não tive permissão para comentar, apenas postar.

— Nick Gillard
fonte

3

Você provavelmente teria que definir o div filho para ter position: absolute.

Atualize o estilo do seu filho para

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

— Ravia
fonte

Eu tentei isso, mas o que eu preciso é a parte inferior do childDiv sentar na parte inferior do parentDiv, o gráfico deve ser dinâmico e as alturas irão variar de cada childDiv para o próximo ... o posicionamento pode funcionar, mas eu não tenho quit descobri algo que é sólido ...

— sia

5

não é uma boa ideia definir o topo em 207 (algum número arbitrário) melhor definir o fundo: 0

— pstanton

2

Um post antigo, mas pensei em compartilhar uma resposta para quem procura. E porque quando você usa as absolutecoisas podem dar errado. O que eu faria é

HTML

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

O css

parentDiv{

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

E isso simplesmente colocaria aquele div inferior de volta no div pai. seguro para a maioria dos navegadores também

Isso tornaria o childDiv metade na parte inferior do parentDiv. Você precisa usar pelo menos -40px na margem superior. Também é a melhor prática usar posição: relativa; neste caso, para ambos os divs.

— Augus

1

Eu tinha algo semelhante e fiz funcionar adicionando um pouco de enchimento na criança.

Tenho certeza de que algumas das outras respostas aqui levariam à solução, mas não consegui fazê-las funcionar facilmente depois de muito tempo; Em vez disso, acabei com a solução de padding-top que é elegante em sua simplicidade, mas me parece meio hackeada (sem mencionar que o valor de pixel que ela define provavelmente depende da altura do pai).

— Cellepo
fonte

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>

Expandir trecho

Esta é a minha solução

— NEM
fonte

-6

Se você tiver vários Divs filhos dentro de seu Div pai, poderá usar a propriedade de alinhamento vertical da seguinte maneira:

.Parent div
{
  vertical-align : bottom;
}

— Pawan
fonte

Por que tantos votos negativos para isso sem comentários? Não resolve o problema? Pesquisa online sugere que deveria.

— sholsapp de