내부 div를 부모 div 크기로 자르는 방법?

나는 square div ("square"라고 불림)를 가지고 있고 다른 div ("caption")를 "square"안에 넣으려고합니다. 그러나 캡션은 사각 경계를 벗어납니다! 상위 div의 정확한 경계까지 크기를 줄이는 방법? 이 경우 내부 div를 부모 div 크기로 자르는 방법?

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     body { 
      background-color: #000000; 
     } 
     a { 
      text-decoration: none; 
      color: #FFFFFF; 
     } 
     div.square { 
      background-color: #1BA1E2; 
      display: inline-block; 
      width: 44px; 
      height: 44px; 
      margin: 0 6px 0 9px; 
     } 
     div.caption { 
      display: inline-block; 
      margin: 15px 0 0 3px; 
      padding: 0; 
      color: #FFFFFF; 
      font-size: 24px; 
     } 
     span.description { 
      display: inline-block; 
      vertical-align: bottom; 
      font-size: 18px; 
     } 
    </style> 
</head> 
<body> 
    <p> 
     <a href="page"> 
      <div class="square"> 
       <div class="caption"> 
        Caption 
       </div> 
      </div> 
      <span class="description"> 
       Description 
      </span> 
     </a> 
    </p> 
</body> 
</html>

은 Caption은 (WP7 스타일 같은) 파란 상자 안에 Cap + 1/2 t로 절단되어야한다. 그리고 설명이 나란히 있습니다.

출처

2012-06-23 Dmitry Isaev

왜 그냥 자막 DIV에게 용기와 동일한 폭을주지 않는다? 44px – Keith

위의'div.caption' 코드에'width : 44px;'를 추가했습니다 - 도움이되지 않았습니다 ... –