2

私の問題を説明するために、次の jsfiddle を作成しました: http://jsfiddle.net/wGFbc/

div 内に一連の dl が含まれています。それらは一連のタブのように表示されますが、構造的には dl です (残念ながらこれを変更する方法はありません)。

<div id="container">
    <dl>
        <dt>
            Color
        </dt>
        <dd>
            <ol>
                <li>
                    <a href="#" title="Blue">Blue</a>
                </li>
                <li>
                    <a href="#" title="Red">Red</a>
                </li>
                 <li>
                    <a href="#" title="Green">Green</a>
                </li>
            </ol>
        </dd>
    </dl>
    <dl>
        <dt>
            Price
        </dt>
         <dd>
            <ol>
                <li>
                    <a href="#" title="100">100</a>
                </li>
                <li>
                    <a href="#" title="200">200</a>
                </li>
            </ol>
        </dd>
    </dl>
</div>

各 dl > dd は完全に左側に配置されるため、コンテンツは常にコンテナーの左側と同じ高さになり、dl (タブのように水平に配置されます) の左側とは同じ高さになりません。

dd コンテンツはデフォルトで非表示になっており、dt のようなタブをクリックするとそれぞれが表示されます。

複雑なのは、 dd が絶対位置であるため、コンテナーからこぼれ、その下にある要素の位置を変更しないことです。マークアップを変更せずに必要な効果を得るためにここで使用できる css トリックはありますか?

4

2 に答える 2

0

javascript/jquery で dls の高さを取得できます。次に、高さが最も高い dl の値を保存し、#container div に高さを設定します。

dl が変更されるたびに、この関数を実行する必要があります。質問を正しく理解できたことを願っています。

于 2013-05-18T11:18:44.140 に答える
-1

追加してみてください：

dl {
    float: left;
    margin-right: 10px;
    position: relative; /* this */
}

これはあなたが望んでいたものですか？http://jsfiddle.net/wGFbc/2/

于 2013-05-18T11:22:32.073 に答える