CSS 绝对位置仅在容器 div 内

Question

我创建了以下 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 技巧来获得我想要的效果而无需更改标记吗？

Answer 1

您可以使用 javascript/jquery 获取 dls 的高度。然后保存具有最高高度的 dl 值并在#container div 上设置高度。

每次 dl 更改时，您都必须运行此函数。希望我正确地理解了这个问题。