如何防止我的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>