Question

我有以下代码

.content {
    width: 500px;
    border: 2px solid #000;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -150px 0px 0px -250px;
    }

    dl {

    }

    dl dt {
    float: left;
    }

    dl dd {
    clear: both;
    margin: 0px 0px 0px 0px;
    }

和HTML

<div class="content">
<h1>Title</h1>
<dl>
<dt>tab 1</dt>
<dd>content content</dd>

<dt>tab 2</dt>
<dd>content content </dd>
</dl>
</div>

这是带有标签的弹出窗口。问题是...到DD（标签内容）我添加位置：绝对，但大多数文本都在窗外...我知道DT高度不灵活...它不会自动调整到内容（dt和dd）...我试过溢出：隐藏等等我无法得到适当的效果。有人能帮助我吗？

Answer 1

块元素的自动高度将忽略浮动元素。这可以通过快速清除伪元素来解决：

#element::after { content:""; display:block; clear:both; }

另外，使用float:left;（或右obvs）的元素可以溢出具有height:auto;的容器的边界。该解决方案涉及创建一个新的::after CSS伪元素，可以clear:both;任何浮动子元素（以及display:block;和content:"";，因为它们使伪元素表现为块，并且它分别是伪元素的必需项。

在您的情况下，请尝试将其添加到CSS文件的末尾：

.content::after, dl::after {content:"";display:block;clear:both;}

我不确定这是否会有所帮助，我不确定整个情况会是什么样的。

DL中的溢出 - poup窗口的尺寸不会自动调整

1 个答案: