CSS"탑"위치

Question

<div>
<h1>Title</h1>
<table>
...
</table>
</div>

지금

<h1>

는률:0;그래서 그것의 맨 위에 div.의 높이 div300px.

그러나 나는 같은 표의 하단에 위치 div,예를 들어,.탑="아래"하지만 전체적인 테이블.

Answer 1

이것을 보십시오: http://jsbin.com/emoce

하지만 그것은 비슷한 대릴의 솔루션입니다.를 제외하고 나를 사용하여 위치:절대에 포장 div 지만,오히려 위치:을 만들어 상대적으로 테이블의 절대적인 위치입니다.

Answer 2

Remy Sharp가 제안한 내용은 다음과 같습니다.

<style type="text/css" media="screen">
#container { 
    position: relative; 
    margin: 0;
    height:300px;
    border:1px solid #000; 
}
#container h1 { 
    margin:0; 
}
#tableLayout { 
    position: absolute;
    bottom:0; 
    border: 1px solid #c00;
}
</style>

<div id="container">
    <h1>Title</h1>
    <table id="tableLayout">
      <tr><td>example cell</td></tr>
    </table>
</div>

작동하는 것 같습니다!

나는 여기에 게시하여 항상 여기에있을 것입니다.

Answer 3

이건 어때 :

<style type="text/css">
#container { 
    position: absolute; 
    margin: 0;
    height:300px;
    border:1px solid #000; }
#container h1 { 
    margin:0; }
#tableContainer { 
    position: absolute;
    bottom:0; }
</style>

<div id="container">
    <h1>Title</h1>
    <div id="tableContainer">
        <table id="tableLayout">
            <tr><td>...</td></tr>
        </table>
    </div>
</div>

유일한 문제는 컨테이너 DIV와 식탁 선반 DIV가 모두 절대적으로 배치되어야한다는 것입니다. 이것이 당신의 레이아웃에 효과가 있는지 확실하지 않습니다.