css - 在 Div 行之间插入的间隙

Question

我有一个简单的行列出了某些融资机会。我对 CSS/HTML 代码中发生的行为感到困惑，如果我不使用单独的类，列表中的条目之间会有间隙。例如，下图表示我使用时发生的情况:

<div class="panel-inside">
    <div class="row">
        <div class="label">Funding Opportunity 1</div>
        <div class="label-date">Sep. 16, 2012</div>
    </div>
    <div class="listSeparator"></div> 
    <div class="row">
        <div class="label">Funding Opportunity 2</div>
        <div class="label-date">Dec. 2, 2012</div>
    </div>
</div>

但是，如果我关闭每个 "panel-inside" 类，那么结果就会不同。

<div class="panel-inside">
    <div class="row">
        <div class="label">Funding Opportunity 1</div>
        <div class="label-date">Sep. 16, 2012</div>
    </div>
</div>
<div class="listSeparator"></div> 
<div class="panel-inside">
    <div class="row">
        <div class="label">Funding Opportunity 2</div>
        <div class="label-date">Dec. 2, 2012</div>
    </div>
</div>

我需要像第二张图片那样的格式，但我不明白为什么我必须关闭每个“面板内部”类。那个 div 不应该是行的“容器”吗？我认为存在差距的原因是因为第二行从前一行的文本开始，但我不知道如何解决这个问题。我在下面包含了带有边框颜色轮廓的 CSS 代码，以帮助区分元素。感谢您的帮助!

.panel-inside { 
    border: 3px dotted purple;
    border-left: 2px solid #D6D3D6;
    border-right: 2px solid #D6D3D6;
    background: white;
    padding-left: 0px;
    padding-right: 0px;
    overflow:auto;
    border-radius:7px;
} 

.row                                   
{
    height: 40px;      
    width:100%;        
    vertical-align:middle;
}

.label                               
{
    border: 1px dotted blue;
    font-family: BBAlpha Sans;
    font-size: 15pt;
    display:inline;    
    float:left;
    line-height:40px; 
    margin-left:5px;   
}

.label-date
{
    border: 1px dotted black;
    font-family: BBAlpha Sans;
    font-size: 12pt;
    color:#686868;
    display:inline;    
    float:right;
    line-height:40px; 
    margin-right:7px;  
}

.listSeparator                
{
    border-bottom: solid 1px Silver;
}

Answer 1

尝试像这样修改 listSeparator 类:

.listSeparator                
{
    border-bottom: solid 1px Silver;
    clear:both;
}

发生这种情况是因为您没有正确清除 .row 类，但外部额外的 div 用作部分重置器。