Question

我有一个方形div（称为“square”）并试图将另一个div（“caption”）放在“square”中。但标题超出了方形边界！如何将其大小缩小到父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样式）。和旁边的描述。

Answer 1

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

Running example

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

1 个答案: