Question

如何防止出现在顶部的div溢出。我也不想设置静态尺寸。

查看

.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>

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

2 个答案: