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

fonte

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

Alinhar DIVs para o fundo ou linha de base

Respostas: