vertical-align : 하위 div 위

Question

안녕하세요 세계 div가 상위 div의 맨 아래에 있지만 행운이 없도록하려고합니다. 어떤 아이디어?

<ItemTemplate> 
    <div style="float: left; padding-right: 0px; width: 98%; width: 170px; height: 490px; overflow: auto; text-align: center; border: 1px solid Black; padding: 0px; margin: auto;"> 
     <div style="width: 98%; margin: auto; border-bottom: 1px dotted Black; padding: 1px;"> 
      <asp:Label ID="lblday" Text='<%# Bind("ShortDate") %>' runat="server"></asp:Label> 
     </div> 
     <div id="PanelDay" style="text-align: left; margin-top: 5px;" runat="server"></div> 
     <div id="Div2" style="text-align: left; vertical-align:bottom; margin-top: 5px;" runat="server"> 
      hello world 
     </div> 
    </div> 
</ItemTemplate> 

Answer 1

두 단계 :

1. 이에 "Hello World"를 부여하여 외부 사업부 position: relative;
2. 을 부여 DIV position: absolute; bottom: 5px;

다음은 작업 스타일을 정리 한 것입니다. 아직 서식을 개선하지 못했습니다. http://jsfiddle.net/CqMqx/

Answer 2

이 예제는 당신을 도울 수 있습니다

#footer { 
    bottom: -100px; 
    position: absolute; 
    text-align: left; 
    padding: 5px; 
} 

Answer 3

세로 맞춤은 표 셀로 작동하는 요소에서만 작동합니다. 이를 달성하는 데는 두 가지 방법이 있습니다. 가장 확실한 방법은 테이블을 사용하는 것입니다.

다른 방법은 display: table-cell을 사용하는 것입니다. This Quirksmode article helps explain the different display attributes.

Answer 4

vertical-align 속성은 텍스트 (또는 이미지 또는 인라인 인 경우) 용입니다. 블럭 레벨의 것을 맨 아래에 놓으려면, 먼저 div (왼쪽에 떠있는 블럭)를 position, relative, 그리고 "hello world"div에 다음 CSS를 줄 것입니다 :

position:absolute; 
bottom:0; 

더 많은 조정이 필요하지만 일반적 아이디어입니다. (나는 ASP와 관련하여 정말 잘 작동하지 않기 때문에 "생각한다"라고 말하며 문맥은이 솔루션에서 작동하지 않을 수도 있습니다.)