2

我创建了以下 jsfiddle 来说明我的问题：http: //jsfiddle.net/wGFbc/

我有一组 dl 包含在一个 div 中。它们几乎像一组选项卡一样显示，但在结构上它们是 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 回答