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>

この場合、青いボックス内で+ 1/2Captionにカットする必要があります（WP7スタイルのようなもの）。そして、説明と一緒に。Capt

4

1 に答える 1

5

のスタイルoverflow:hiddenを入力しdiv.squareます。これにより、ボックスの境界でキャプションが途切れます。

実行例

于 2012-06-23T00:38:32.397 に答える