텍스트를 절대 바닥에 맞 춥니 다

Question

각 문자의 아래쪽이 div의 맨 아래에 닿도록 텍스트에 밀어 넣으려고합니다. 마치 div의 테두리가 각 문자에 밑줄을 그어 놓은 것처럼. 나는 어떻게 이것을 성취 할 것인가? 기본적으로 나는 몇 픽셀 아래로 텍스트를 밀어하려고.

Answer 1

한 가지 방법은 상대적으로 컨테이너의 위치를 ​​설정하는 것입니다, 그리고 절대에 자식 요소 :

<div style="position:relative;height:200px;border:1px solid #ccc;"> 
    <div style="position:absolute;bottom:0px;left:0px;"> 
     I'm a bottom feeder... 
    </div> 
</div> 

편집

단지 설명을 위해, 나는 그것 때문에 line-height를 사용하고 있지 않다 텍스트가 새 행으로 바뀌면 올바르게 동작하지 않습니다.

다른 기술에 대한 설명은 여기를 참조하십시오. 특히 상대 대에게 절대 위치를 사용하여 예를 참고 :

http://jsfiddle.net/c2tqZ/1/

Answer 2

CSS : 그런

text{ 
    vertical-align:baseline; 
    } 

뭔가? 이를 달성하기

Answer 3

http://jsfiddle.net/g835a/4/

있는 style.css를

.header 
{ 
    border: 1px solid red; 
    height: 100px; 
    position: relative; 
} 

#header-content { position: absolute; bottom: 0; left: 0; } 

HTML :

<div class="header"> 
    <h1>Title</h1> 
    <div id="header-content">Some content</div> 
</div> 

Answer 4

은 "문제"당신이 마주침은 글꼴로 인해 발생합니다. 글꼴은 일반적으로 문자 아래에 "j"및 "g"와 같은 디 센더를 설명하기위한 공간을 남깁니다. 그에 따라 하단 속성의 음수 값을 조정해야합니다.

magnum2002의 바이올린에서 하단 값을 0에서 -5로 변경하면 작동합니다.