한동안 같은 문제로 어려움을 겪은 후 마침내 모든 요구 사항을 충족시키는 솔루션을 찾았습니다.
- 컨테이너의 높이를 알 필요가 없습니다.
- 상대 + 절대 솔루션과 달리 내용은 자체 레이어에 떠 다니지 않습니다 (즉, 컨테이너 div에 정상적으로 포함됩니다).
- 여러 브라우저에서 작동합니다 (IE8 +).
- 구현이 간단합니다.
해결책은 하나를 취하는데 <div>, 이것을 "aligner"라고 부릅니다.
CSS
.bottom_aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 0px;
}
html
<div class="bottom_aligner"></div>
... Your content here ...
이 트릭은 키가 크고 스키니 div를 만들어 텍스트 기준선을 컨테이너의 맨 아래로 밀어 넣습니다.
다음은 OP가 요구 한 것을 달성하는 완전한 예입니다. 데모 목적으로 만 "bottom_aligner"를 두껍고 빨간색으로 만들었습니다.
CSS :
.outer-container {
border: 2px solid black;
height: 175px;
width: 300px;
}
.top-section {
background: lightgreen;
height: 50%;
}
.bottom-section {
background: lightblue;
height: 50%;
margin: 8px;
}
.bottom-aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 3px;
background: red;
}
.bottom-content {
display: inline-block;
}
.top-content {
padding: 8px;
}
HTML :
<body>
<div class="outer-container">
<div class="top-section">
This text
<br> is on top.
</div>
<div class="bottom-section">
<div class="bottom-aligner"></div>
<div class="bottom-content">
I like it here
<br> at the bottom.
</div>
</div>
</div>
</body>
