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更改时都必须运行此函数。希望我能正确理解这个问题。

Answer 2

尝试添加：

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

这是你想要的吗？ http://jsfiddle.net/wGFbc/2/

CSS位置绝对只在容器div内

2 个答案: