divs之間的不等空間

我有幾個divs，margin-bottom：5px。對我來說不是邏輯的是，divs之間的間隔不相等。如果我在div中插入一些文字，空間會減少。沒有文字，空間就會增加。divs之間的不等空間

它看起來像這樣：

所有div有位置：相對和邊距：5px的：

.divNote{ 
    position: relative; 
    display: inline-block; 
    left: 20%; 
    width: 60%; 
    min-height: 60px; 
    margin-bottom: 5px; 
    background-color: #FAC28A; 
    font-family: verdana, sans-serif; 
    font-size: 15px; 
    color: #003399; 
    padding-left: 5px; 
    padding-top: 1px; 
    padding-bottom: 20px; 
    box-shadow: 3px 3px 3px gray;  
    box-sizing: border-box; 
}

來源

2016-08-12 FrenkyB

設置float:left到.divNote這將工作。

@border: 1px; 
 

 
.divMain{ 
 
    position: absolute; 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 

 
.divNote{ 
 
    position: relative; 
 
    display: inline-block; 
 
    left: 20%; 
 
    width: 60%; 
 
    min-height: 60px; 
 
    margin-bottom: 5px; 
 
    background-color: #FAC28A; 
 
    font-family: verdana, sans-serif; 
 
    font-size: 15px; 
 
    color: #003399; 
 
    padding-left: 5px; 
 
    padding-top: 1px; 
 
    padding-bottom: 20px; 
 
    box-shadow: 3px 3px 3px gray;  
 
    box-sizing: border-box; 
 
    float:left; 
 
} 
 

 
.divNoteDatum{ 
 
    position: absolute; 
 
    display: inline-block; 
 
    font-weight: bold;  
 
    bottom: 0; 
 
    right: 5px; 
 
    color: #003399; 
 
} 
 

 
.divUpper{ 
 
    position: relative; 
 
    height: 20%; 
 
}

<div id="divMain" class="divMain"> 
 

 
    <div class="divUpper"></div> 
 

 
    <div id="divNote" class="divNote"> 
 
    test<br/>test<br/>test 
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    test<br/>test<br/>test 
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    test<br/>test<br/>test 
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    
 
    <div id="divNote" class="divNote"> 
 
    
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 

 

 
</div> 
 
<!-- divMain -->

來源

2016-08-12 10:03:36

它的工作原理......但怎麼來的？我永遠不會考慮這個。如何浮動連接到邊緣底部？ – FrenkyB

我忘了爲什麼，雖然有很多關於此的文章，但我無法讓谷歌與我一起工作（我讀過一些文章） –

用於內聯塊divNote元素添加vertical-align:top。內聯塊元素內容的某些溢出會導致此問題。它總是很好的做法，使用垂直對齊

@border: 1px; 
 

 
.divMain{ 
 
    position: absolute; 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 

 
.divNote{ 
 
    position: relative; 
 
    display: inline-block; 
 
    float: left; 
 
    left: 20%; 
 
    width: 60%; 
 
    min-height: 60px; 
 
    margin-bottom: 5px; 
 
    background-color: #FAC28A; 
 
    font-family: verdana, sans-serif; 
 
    font-size: 15px; 
 
    color: #003399; 
 
    padding-left: 5px; 
 
    padding-top: 1px; 
 
    padding-bottom: 20px; 
 
    box-shadow: 3px 3px 3px gray;  
 
    box-sizing: border-box; 
 
    vertical-align: top; 
 
} 
 

 
.divNoteDatum{ 
 
    position: absolute; 
 
    display: inline-block; 
 
    font-weight: bold;  
 
    bottom: 0; 
 
    right: 5px; 
 
    color: #003399; 
 
} 
 

 
.divUpper{ 
 
    position: relative; 
 
    height: 20%; 
 
}

<div id="divMain" class="divMain"> 
 

 
    <div class="divUpper"></div> 
 

 
    <div id="divNote" class="divNote"> 
 
    test<br/>test<br/>test 
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    test<br/>test<br/>test 
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    test<br/>test<br/>test 
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    
 
    <div id="divNote" class="divNote"> 
 
    
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 

 

 
</div> 
 
<!-- divMain -->

來源

2016-08-12 10:04:19 z0mBi3

divs之間的不等空間

回答

相關問題