Div行之間插入的差距

我有一個簡單的行列出了某些資金機會。我很困惑於CSS/HTML代碼中出現的行爲，如果我不使用單獨的類，列表中的條目之間會有間隔。例如，下面的圖表示當我使用會發生什麼：Div行之間插入的差距

<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

然而如果我關閉然後每個「面板內側」類的結果是不同的。

<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

我需要的格式要像第二張圖片，但我不明白，爲什麼我不得不關閉每個「面板中」級。那個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; 
}

來源

2012-03-07 user1152440

您使用的是什麼瀏覽器？我試過它在IE瀏覽器和鉻，它看起來就像在圖片中（沒有添加分隔符div，沒有關閉並重新打開div） – 2012-03-07 15:19:05

嘗試修改listSeparator類，像這樣：

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

這是因爲你沒有正確的clearfix類.row，但外界額外的div作爲部分歸零。

來源

2012-03-07 15:18:58

說真的 - 當你有表格數據和表格結構時 - 使用表格...更強健和交叉瀏覽器兼容。

可選 - 將overflow:auto;添加到您的.row或clear:both;至.listSeparator，這應該可以解決問題。

編輯：使用overflow時可以省略高度，也可以省略.listSeparator（通過將邊框添加到.row）。

來源

2012-03-07 15:18:22 Christoph

我會爲建議+1，但這應該是一個評論，因爲它不是一個答案真。 – 2012-03-07 15:20:17

這取決於 - 當他切換到表格時，這將解決他的問題，但我爲他的原始問題添加了另一個解決方案;） – Christoph 2012-03-07 15:23:46

感謝Christoph和Mihalis，這是有效的。從建議中，我想我會考慮一下桌面的事情，這會讓事情變得更容易。我仍然處於學習階段，但再次感謝你，這確實有幫助，我很感激。 – user1152440 2012-03-07 15:37:26

這裏是每個行都沒有關閉class =「panel-inside」類的解決方案。

HTML是作爲第一條件但一個差相似 -

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

定製CSS：

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

清除允許浮動的元素前面的文檔中存在的以沿其側面浮起。所以通過使用clear：這意味着你的div將會在你的div旁邊的其他浮動元素的末尾移動。

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

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

來源

2012-03-07 15:36:55 w3uiguru

Div行之間插入的差距

回答

相關問題