0

我有一个方形 div（称为“方形”）并试图在“方形”内放置另一个 div（“标题”）。但是标题超出了方形边界！如何将其大小削减到父 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>

在这种情况下，Caption应该在蓝色框内切到Cap+ 1/2 t（类似于 WP7 样式）。以及旁边的说明。

4

1 回答 1

5

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

运行示例

于 2012-06-23T00:38:32.397 回答