즉, 아래의 HTML 표시에는 오른쪽 상단에 "작은 단어"가 있고 오른쪽 아래에 표시하려고합니다.플로팅 오른쪽 요소를 부모 div의 맨 아래에 세로로 정렬하려면 어떻게해야합니까?
<html>
<body>
<div style="width: 500px; background-color: #cdcdcd">
<div style="font-size: x-small; float: right">little words</div>
<div style="font-size: x-large">BIG WORDS</div>
</div>
</body>
</html>
오른쪽 플로트를 사용하여 안정적으로 (대부분의 브라우저 ...) 할 수 있는지 알 수 없습니다. 당신이 수레를 원하는 경우에,
<html>
<body>
<div style="width: 500px; background-color: #cdcdcd; position: relative;">
<div style="font-size: x-small; postition: absolute; bottom: 0; right: 0">little words</div>
<div style="font-size: x-large">BIG WORDS</div>
</div>
</body>
</html>
를 div의 모든 순서를 변경하고, 포함 사업부에 clearfix 클래스를 적용
당신은 절대 위치에 그것을 시도 할 수 있습니다.
<html>
<body>
<style type="text/css">
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
/* Opera hack */
* html .clearfix { height:1%; }
.clearfix { display:block; }
</style>
<div style="width: 500px; background-color: #cdcdcd" class="clearfix">
<div style="font-size: x-large">BIG WORDS</div>
<div style="font-size: x-small; float: right">little words</div>
</div>
</body>
</html>
줄 높이를 사용하십시오.
alt text http://img84.imageshack.us/img84/1293/pantallazoi.png
<html>
<body>
<div style="width: 500px; background-color: #cdcdcd">
<div style="font-size: x-small; float: right; line-height:400%;">little words</div>
<div style="font-size: x-large">BIG WORDS</div>
</div>
</body>
</html>
결과를 설정할 수 있습니다, "BIG 단어"의 더블로 설정