如何将内部div切割为其父级大小？

我有一个正方形div（称为“square”），并试图在“square”中放置另一个div（“caption”）。但标题超出了广场边界！如何将其大小缩小到父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应削减至Cap + 1/2 t蓝色的盒子里（像WP7风格）。和旁边的描述。

来源

2012-06-23 Dmitry Isaev

你为什么不给与容器相同宽度的标题div？ 44px – Keith

为'div.caption'添加'width：44px;'以上代码 - 没有帮助... –