0

わかりました、いくつかの div とそのすべてのコンテンツを取り、それらを積み重ねて、次の方法で通常のフローに含まれる div (#stack) を表示させようとしています。

CSS:

#stack
{
    position:relative;
    display:block;
}
#stack div
{
    position:absolute;
    left:0;
}

HTML:

<div id="stack">
    <div>
        <img src="images/1.jpg">
        <p>
            First Image
        </p>
    </div>
    <div>
        <img src="images/2.jpg">
        <p>
            Second Image
        </p>
    </div>
    <div>
        <img src="images/3.jpg">
        <p>
            Third Image
        </p>
    </div>
    <div>
        <img src="images/4.jpg">
        <p>
            Fourth Image
        </p>
    </div>
</div>

これは機能しますが、div#stack の幅/高さが 0 になっていることを除けば、最大の子と同じサイズにしたいと考えています。

助けてくれてありがとう！

4

3 に答える 3

1

を使用してドキュメントのフローから内側のdivを取り出しているためposition: absolute;、外側のdivは、どのような場合でも最大の子のサイズまで伸ばすことはできません。その効果を達成するには、JavaScriptを使用する必要があります。jQueryに精通している場合は、次のようなものを使用できます。

var w = false, h = false;

$('#stack div').each(function() {
    w = $(this).width() > w || !w ? $(this).width() : w;
    h = $(this).height() > h || !h ? $(this).height() : h;
});

$('#stack').css({
    width: w,
    height: h
});
于 2009-12-04T20:47:12.517 に答える
0

position:absolute を設定すると、ノードがフローから除外されます。これが、フローされたコンテンツを持たない親が 0x0 のサイズを取得する理由です。

サーバー コード (PHP など) がこれらの画像を認識している場合、それらの最大幅と最大高さを計算し、親の高さ/幅を適切に設定できます。

または、Tatu が言うように、JavaScript を使用してクライアント側で実行することもできます。

于 2009-12-04T20:49:51.290 に答える
0

の幅で#stackその子もシュリンク ラップしますか?それとも高さだけを気にしますか? あなたが明示的にそれをつけたので、私は後者を想定してdisplay: blockいます。

その場合、CSSだけでそれを行うことができるからです：

#stack {
    overflow: hidden;
    _zoom: 1;
}       
#stack div {
    float: left;
    margin-right: -100%;
}

IE6で_zoom: 1to トリガーを追加しました。hasLayoutこれを好みの方法に変更することも (たとえば、別の IE6 スタイルシートで)、IE6 をサポートする必要がない場合は完全に除外することもできます。

Opera では、スタック (または) をフロートさせて子 div に追加すると、#stackその子を完全に (つまり、幅も) シュリンクラップすることができます。それが Opera のバグなのか、他のブラウザのバグなのか、仕様が曖昧なだけの違いなのかはわかりません。display: inline-blockwidth: 100%

于 2009-12-04T23:18:25.413 に答える