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之间的不等空间

回答

相关问题