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>

enter image description here

但是，如果我关闭每个＆＃34; panel-inside＆＃34; 类，那么结果会有所不同。

<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>

enter image description here

我需要将格式设置为第二张图片，但我不明白为什么我必须关闭每个＆＃34;面板内部＆＃34;类。不应该将该div作为容器＆＃39;对于行？我认为差距的原因是因为第二行开始于文本从它之前停止的那一行，但我不知道如何解决这个问题。我在下面的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

说真的 - 当你有表格数据和表格结构时 - 使用表格...更强大和交叉浏览器兼容。

（可选） - 将overflow:auto;添加到.row或clear:both;至.listSeparator，这可以解决问题。

编辑：您可以在使用overflow时省略高度，也可以省略.listSeparator（通过将边框添加到.row）。

Answer 2

尝试修改listSeparator类，如下所示：

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

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

Answer 3

这是没有为每一行关闭class =“panel-inside”类的解决方案。

HTML与第一个条件相似但只有一个区别 -

<div class="listSeparator">&nbsp;</div>

的CSS：

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

Clear允许文档中较早出现的浮动元素沿其两侧浮动。因此，通过使用clear：都意味着你的div将在div旁边的其他浮动元素的末尾移动。

http://www.free-scripts.net/html_tutorial/css/properties/classify/clear.htm

http://www.positioniseverything.net/easyclearing.html

Div行之间插入的差距

3 个答案: