如何将内部div切割为其父div大小？

Question

如何将内部div切割为其父div大小？

我有一个方形div(称为"square")并试图在"square"中放入另一个div("caption").但标题超出了方形边界!如何将其大小缩小到父div的确切边界？

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        body {
            background-color: #000000;
        }
        a {
            text-decoration: none;
            color: #FFFFFF;
        }
        div.square {
            background-color: #1BA1E2;
            display: inline-block;
            width: 44px;
            height: 44px;
            margin: 0 6px 0 9px;
        }
        div.caption {
            display: inline-block;
            margin: 15px 0 0 3px;
            padding: 0;
            color: #FFFFFF;
            font-size: 24px;
        }
        span.description {
            display: inline-block;
            vertical-align: bottom;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>
        <a href="page">
            <div class="square">
                <div class="caption">
                    Caption
                </div>
            </div>
            <span class="description">
                Description
            </span>
        </a>
    </p>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

在这种情况下,Caption应该在蓝框内切割到Cap+ 1/2 t(类似WP7风格).和旁边的描述.

Answer 1

jim*_*imr 5

放入overflow:hidden样式div.square.这将导致标题在框的边界处切断.

运行示例

归档时间：	13 年，5 月前
查看次数：	2147 次
最近记录：	13 年，5 月前