我正在尝试创建一个带有事件的日历,这是我的代码片段:
div#planning {
display: flex;
flex-flow: row;
justify-content: flex-start;
align-items: flex-start;
overflow-x: auto;
overflow-y: hidden;
}
#planning .heure {
border: 1px solid #aaa;
width: 100px;
height: 35px;
margin: -0.9px 0 0 -0.9px;
position: relative;
box-sizing: border-box;
}
#planning>.jour {
width: unset;
max-width: unset;
}
#planning>.jour:before {
content: attr(data-header);
font-size: 12px;
background: #919293;
color: #fff;
position: relative;
top: -6px;
padding: 0 5px;
border-radius: 3px;
}
#planning>.jour:first-child {
margin-left: 24px;
}
.jour:first-child .heure:before {
content: attr(data-header);
position: absolute;
left: -5px;
top: -7px;
transform: translateX(-100%);
font-size: 12px;
}
.horaire {
position: absolute;
width: 100%;
left: 0;
background: #00adff;
opacity: 0.5;
}
.jour>div {
position: relative;
background: #fff;
}
#formhoraires .miniform input {
width: 60px;
}
#collaborateur .miniform {
width: unset;
margin-top: 10px;
}
div#horaires {
min-height: unset;
}
<div id="planning" class="form vertical">
<div class="jour" data-header="mer.01/03">
<div>
<div class="heure" data-header="7h"></div>
<div class="heure" data-header="8h"></div>
<div class="heure" data-header="9h"></div>
<div class="heure" data-header="10h"></div>
<div class="heure" data-header="11h"></div>
<div class="heure" data-header="12h"></div>
<div class="heure" data-header="13h"></div>
<div class="heure" data-header="14h"></div>
<div class="heure" data-header="15h"></div>
<div class="heure" data-header="16h"></div>
<div class="heure" data-header="17h"></div>
<div class="heure" data-header="18h"></div>
<div class="heure" data-header="19h"></div>
<div class="heure" data-header="20h"></div>
<div class="horaire" style="top:0px;height:140px"></div>
<div class="horaire" style="top:420px;height:35px"></div>
</div>
</div>
<div class="jour" data-header="jeu.02/03">
<div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="horaire" style="top:70px;height:140px"></div>
</div>
</div>
<div class="jour" data-header="ven.03/03">
<div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="horaire" style="top:35px;height:140px"></div>
</div>
</div>
<div class="jour" data-header="sam.04/03">
<div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
</div>
</div>
<div class="jour" data-header="dim.05/03">
<div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="horaire" style="top:35px;height:140px"></div>
</div>
</div>
<div class="jour" data-header="lun.06/03">
<div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="horaire" style="top:0px;height:140px"></div>
</div>
</div>
<div class="jour" data-header="mar.07/03">
<div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="heure"></div>
<div class="horaire" style="top:35px;height:105px"></div>
<div class="horaire" style="top:420px;height:35px"></div>
</div>
</div>
</div>
小提琴:https://jsfiddle.net/0sL1pufa/
如您所见,带有
horaire
类的div 不在顶部时会有错误偏移。我测量了.heure
div 具有准确的指定高度,但.horaire
div 不在指定的 y 位置。
由于
.heure
div是35像素,一个.horaire
值为top
的420px
div应该恰好在第12行。
这是因为您要将 margin top 添加到
#planning .heure
#planning .heure {
border: 1px solid #aaa;
width: 100px;
height: 35px;
margin: -0.9px 0 0 -0.9px; <<<<<<<<<<<<<<<<<< top is -0.9 so you are pushing contect from top to bottom
position: relative;
box-sizing: border-box;
}