html - 为什么如果我不明确地明确设置此 div 的高度，它会向上扩展并低于前面的元素？

Question

我不太喜欢 CSS，我对为什么会出现这种行为以及如何正确处理这种情况有以下疑问。

在一个非常非常旧的页面中，我有这样的东西:

<div class="panel-wrapper">
    <div class="panel-content">
        <table class="standard-table-cls" style="width: 98%;">
            <thead>
            <tr>
                <th colspan="6" style="text-align: center; border-left: 0">SEDE LEGALE</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Ragione Sociale</td>
                <td colspan=5>
                    <input type="TEXT" name="ragsoc" size=60 maxlength=100 <%=master?"":"readonly"%>
                           class="testosmallUpper" value="<%= ragioneSociale %>" onblur="MakeItUpper(event,this)">
                </td>
            </tr>
            ..............................................................
            ..............................................................
            ..............................................................
        </table>
    </div>
</div>

..................................................
..................................................
..................................................

<div id="anagrafica">
    <div id="anagraficaHeader" class="accordion-pane-header" style="width: 98%;">Referente Tecnico</div>
    ............................................................
    ............................................................
    ............................................................

问题与具有以下 CSS 设置的 id="anagraficaHeader 和 class="accordion-pane-header" 的最后一个 div 有关:

.accordion-pane-header {
    font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding: 2px 4px 2px 4px !important;
    cursor: pointer;
    border-bottom: 1px solid #FFFFFF;
    font-weight: bold;
    color: #ffffff;
    background-color: #99B1DF;
}

如您所见，它设置了背景色 #99B1DF，问题是这样做我得到了这个 div(具有 id="anagraficaHeader 的那个>) 向上扩展，它落在前一个表(代码段中显示了 class="standard-table-cls" 的表)下方。这是我看到的结果:

为什么会发生这种行为？这是什么原因？

因此，在做一些测试时，我尝试为具有类 .accordion-pane-header 的 div 显式设置一个高度，这样做:

.accordion-pane-header {
    font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding: 2px 4px 2px 4px !important;
    cursor: pointer;
    border-bottom: 1px solid #FFFFFF;
    font-weight: bold;
    color: #ffffff;
    background-color: #99B1DF;

    height: 20px
}

这样做我得到 div 有一个固定的高度，并且不会向上扩展到之前定义到代码中的表格下方(仍然有一些图形错误，但这些取决于其他问题)，正如你在这个中看到的图片:

所以，我想知道指定固定高度是否是一个好的解决方案，或者我是否可以采用更智能的方式来实现。

谢谢

Answer 1

回答:

有时您面临的问题出在上层 div 而不是您遇到的 div。
在看到完整的样式表之前，我不能清楚地说出为什么会这样。但我认为这会有所帮助:

 .accordion-pane-header {
        display:block;
        position:relative;
        margin-top: 10px;  // margin does not allow overlapping of data
        height: 20px;  // it's good if you define particular height
        font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
        padding: 2px 4px 2px 4px !important;
        cursor: pointer;
        border-bottom: 1px solid #FFFFFF;
        font-weight: bold;
        color: #ffffff;
        background-color: #99B1DF;
    }

另外，确保你的其他 div 也有(尽可能)

display: block;
position:relative;
margin-top: //some value;
margin-bottom: //some value;
overflow: hidden;