0

私が解決しようとしている問題：

divを含む外部divがあります。

<div class="external">
    <div class="internal">
        content
    </div>
</div>

内部divと外部divの間のマージンは常に同じである必要があります。

内部divが拡大/縮小すると、外部divはその高さと幅を変更して、内部divとの指定されたマージンを維持します。どういうわけか、内部divは両方のdivの幅と高さを制御しています。内部divが大きくなると、マージンを維持するために外部divも大きくなります。内部divが縮小すると、外部divも縮小してマージンを維持します。

誰？読んでくれてありがとう。

4

3 に答える 3

2

デフォルトではCSSのことです：

#internal {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: red;
}
#external {
    display: inline-block;
    padding: 10px;
    background-color: #000;
}

または、次のように全体をアニメーション化することもできます。

$("#internal").animate({width: "300px", height: "500px"}, {duration: 1000, step: function (now,PlainObject) {

    // PlainObject.prop is either 'width' or 'height'
    $("#external")[PlainObject.prop](PlainObject.now + 10);

}});

内側のdivがアニメーション化されると、縮小と拡大が起こると思いましたか? それとも、内側の div のコンテンツが大きい/小さい (内側の div のテキストが多い/少ない) ときのことですか?

このinline-blockプロパティは、CSS のみのソリューションを対象としています。動的な JavaScript ソリューションを使用する場合は、次のように設定する必要があります。display: block;

于 2013-02-01T13:50:06.017 に答える
1

よくわかりませんが、何が問題なのですか? より詳細なコード/cssを提供していただけますか? 次のコードを試している場合、内側の div でサイズを変更し、間に保持すると、外部の div が拡大/縮小することがわかりますmargin: 10px。

// jQuery snippet tested in my browser's console:
$(document.body).append($('<div id="external">').append($('<div id="internal">').css({margin: '10px', backgroundColor: '#f00', height: '100px', width: '100px', display: 'inline-block'})).css({backgroundColor: '#000'}));

//resize:
$('#internal').height(200);
$('#internal').width(200);
于 2013-02-01T13:47:59.880 に答える
0

固定幅または高さを設定せずに、外部 div にパディングを使用する必要があります。させて

このようなもの:.external { padding: 20px; }必要に応じて、外側の div に max-width を設定することもできます。

于 2013-02-01T13:34:55.760 に答える