CSS 텍스트 컨테이너의 아래쪽 정렬

한쪽에 큰 이미지가 있고 다른쪽에 작은 단락의 텍스트가있는 헤더가 있습니다. 머리글 div의 맨 아래에서 단락을 시작하고 싶습니다. 단락에 5 줄이 있으면 마지막 줄을 머리글의 맨 아래에 놓습니다. 나는 저절로 그 단락을 정렬하는 데 어려움을 겪고있다.CSS 텍스트 컨테이너의 아래쪽 정렬

나는 이런 일이 :

<div id='header'> 

    <img id='logo' /> 

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

</div>

을 그리고 CSS는 다음과 같습니다

div#header { 
    height: 200px; 
} 

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

p#quote { 
    float: left; 
}

출처

2011-12-06 djt

그래서 왼쪽에 줄 지어있는 모든 것이 옆에 있었으면 좋았습니까? – PseudoNinja

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

부모 컨테이너에 position:relative을 설정하여 절대 위치 요소를 지정할 수 있습니다.

출처

2011-12-06 17:13:55

빙고! 팁 주셔서 감사! – djt

코드에 몇 가지 사항을 변경했습니다. 보십시오이

<!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>

출처

2011-12-06 17:40:01

코드 및 요구 사항에 대한 설명을 조금 더주십시오 –

나는 최근에 내가 서버에이 목적을 조정할 수 있었다 수직 센터 트릭 건너 온 : http://codepen.io/Bushwazi/pen/VYBBmL

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

**하면 브라우저가 CSS3 transform를 지원해야한다는 지적 필요를 : http://caniuse.com/#search=transforms

출처

2015-03-04 22:01:36

코드 박스 코드 (flexbox 사용)는이 답변과 완전히 다릅니다. 작동하지 않습니다. – phillyslick

질문을 완전히 이해하지 못했을 것 같습니다. 목표가 텍스트를 세로로 정렬하여 부모의 맨 아래에 놓는 것이 목표라고 생각했습니다. 이것이 내가했던 것처럼 여기에서 끝나는 누군가에게 도움이되기를 바랍니다. –

CSS 텍스트 컨테이너의 아래쪽 정렬

답변

관련 문제