ti-enxame.com

Alinhamento de texto CSS na parte inferior do contêiner

Eu tenho um cabeçalho que tem uma imagem grande flutuada de um lado e um pequeno parágrafo de texto do outro lado. Eu quero que o parágrafo comece na parte inferior do cabeçalho div. Se houvesse 5 linhas no parágrafo, quero que a última linha esteja na parte inferior do cabeçalho. Estou tendo problemas para que o parágrafo se alinhe lá embaixo.

Eu tenho algo parecido com isto:

<div id='header'>

     <img id='logo' />

     <p id='quote'></p>

</div>

E o CSS é:

div#header {
    height: 200px;
}

div#header img#logo {
    float: left;
}

p#quote {
    float: left;
}
23
djt

http://jsfiddle.net/danheberden/ymwPe/

<div id="container">
    <div id="gonnaBeOnTheBottom">
        <p>Hi there!</p>
        <p>I'm on the bottom!</p>
    </div>
</div>

css:

#container {
    background: #EEE;
    height:400px;
    width:400px;
    position:relative;
}
#gonnaBeOnTheBottom {
    position:absolute;
    bottom:0;
}

pela configuração position:relative no contêiner pai, você pode posicionar elementos absolutos dentro dele :)

44
Dan Heberden

Uma abordagem mais moderna seria o uso de flexbox, que facilita muito o trabalho responsivo depois.

Como a distribuição de espaço livre flexbox é gerenciada com margens automáticas, basta fazer o seguinte:

  • Defina o pai como uma exibição flexível
  • Diga que você deseja que o pai distribua seus filhos em um layout de coluna (de cima para baixo)
  • Aplique um margin-top: auto; Ao elemento que você deseja colar na parte inferior, o flex aplicará todo o espaço livre acima
#container {
    background: #eaeaea;
    height:180px;
    display: flex;
    flex-direction: column;
}

#bottom {
  border: 1px solid blue;
  margin-top: auto;
}
<div id="container">
    <p>Container content</p>
    <div id="bottom">
        This flex content will stay at the bottom!
    </div>
</div>
7
Creaforge

Recentemente, deparei com um truque verticalmente central que eu era capaz de ajustar ao servidor com esse objetivo: http://codepen.io/Bushwazi/pen/VYBBmL

parent {
  height: 200px;
}
child {
  position: relative;
  top: 100%;
  transform: translateY(-100%);
  display block
}

** É necessário ressaltar que o navegador precisa suportar CSS3 transform: http://caniuse.com/#search=transforms

1
Jason Lydon

Fiz algumas alterações no seu código. Tente isto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>


div#header {
height:200px;
}

div#header img#logo {
float:left;
}

.header p {
float:left
}

</style>
</head>
<body>

<div id='header'>

     <img id='logo' src="../Pictures/myfarm.PNG" width="220" height="130" />

 <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
  <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
   <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
    <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
     <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>

</div>
</body>
</html>
0
Sarin J S