如何防止我的DIV溢出表格單元格？

Question

如何防止出現在頂部的div溢出。 我不想設置靜態尺寸。

見這裏http://jsfiddle.net/tok5zf35/1/或低於

.panel_white_black { 
    border:7px solid #56575a; 
    filter:alpha(opacity=70); 
    background-color:#56575a; 
} 
.round_all { 
    -webkit-border-radius:4px; 
    -khtml-border-radius:4px; 
    -moz-border-radius:4px; 
    border-radius:4px; 
} 
.round_top { 
    -webkit-border-radius:4px 4px 0px 0px; 
    -khtml-border-radius:4px 4px 0px 0px; 
    -moz-border-radius:4px 4px 0px 0px; 
    border-radius:4px 4px 0px 0px; 
} 

<div class="panel_white_black round_all" Width="200px"> 
    <table width="100%" style="border-collapse:collapse; padding:0;" cellpadding="0"> 
     <tr> 
      <td> 
       <div style="background: #353639; padding:7px; float:left; width:100%;" class="round_top"> 
        <div style="float: left;"> <font color="white">{dialog title}</font> 

        </div> 
        <div style="float:right;"> <font color="white">{X}</font> 

        </div> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div style="background: #FFFFFF; padding:7px;">{data here}</div> 
      </td> 
     </tr> 
    </table> 
</div> 

Answer 1

使用box-sizing屬性：

.round_top { 
     box-sizing:border-box; 
} 

Corrected fiddle。

關於如何工作here on CSS-tricks.com有一個很好的解釋。本質上它歸結爲您的width:100%現在意味着100％，包括我自己的邊界而不是默認的只是我的內容，這導致溢出。

Answer 2

如果你不知道又一個DIV附加你的代碼 - 這裏是解決

http://jsfiddle.net/my0j0mmy/

<div style="background: #353639; padding:7px;" class="round_top"> 
       <div style="float: left;"> <font color="white">{dialog title}</font> 

       </div> 
       <div style="float:right;"> <font color="white">{X}</font> 

       </div> 
       <div style="clear:both"></div> 
      </div>