0

次の 2 つの CSS コードがあります。

dl.set {
    position: relative;
}

dl.set dt {
    position: absolute;
    border: 1px solid #000;
}

および次の HTML:

<dl class="set">
    <dt><img src="images1.jpg" /></dt>
    <dt><img src="images2.jpg" /></dt>
    <dt><img src="images3.jpg" /></dt>
</dl>

私の目的は、画像をさまざまな位置で互いに重なり合うように配置することです。だから私ができると思ったのは、ポジションのtopとbottom属性を利用してabsolute、それらのポジションを配置することです。

ただし、要素はその中の要素の内容をdl認識しません。要素dtのボックスの高さは のままです。フロートをクリアするために要素に aを与えようとしましたが、それも機能しません。代わりに、要素を切り取ります。dl0pxdloverflow: hiddendt

要素の位置と関係を維持しながら、要素dlのコンテンツのサイズに応じて要素のサイズを認識して拡張するにはどうすればよいですか (要素を別の場所に配置する必要があるため)。dtrelativeabsolute

4

1 に答える 1

0

absolute配置は、要素を通常の流れから外します。したがって、あなたdlはいわゆる空でdtあり、別のレイヤーにあります。

dt絶対を配置すると、のサイズに (自動的に)dl拡張されることはありません。dtHTML/CSS を再構築するか、JavaScript ソリューションを考え出す必要があります。

于 2012-05-29T17:41:10.870 に答える