내 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

- 여기 솔루션

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> 

에게 있습니다