我有几个 div 的 margin-bottom: 5px。对我来说不符合逻辑的是,div 之间的间距不相等。如果我在 div 中插入一些文本,空间就会减少。没有文字,空间就会增加。
看起来像这样:
所有 div 都有位置:relative 和 margin-bottom: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;
}
最佳答案
将 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 -->
关于html - div 之间的间距不相等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38915210/