html - 如何防止我的 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% 包括我自己的边框 而不是默认的 just my content ，导致溢出。