我添加了一些代碼來垂直對齊表格內的某個td元素(fullcalendar事件)。這是我的原始post。我從給出的答案和底部的所有對齊中添加了必要的代碼。現在我想讓另一個元素(多個事件鏈接)對齊底部,但在開發工具中,它顯示了一條通過CSS的線,並且它仍然在中間對齊。 我想要的是在一天的底部對齊天細胞中的eventLimit(class = fc-more-cell),就像單個事件在底部對齊一樣。照片如下。 這裏是我的fiddle link我無法將元素垂直對齊底部
$(document).ready(function() {
// page is now ready, initialize the calendar...
var eventsArray = [
{
title: 'Test1',
start: new Date()
},
{
title: 'Test2',
start: new Date("2015-04-21")
},
{
title: 'Test3',
start: new Date("2015-04-21")
}
];
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
left: 'prev,next', //today',
center: 'title',
right: ''
},
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
events: eventsArray,
eventLimit: 1
})
});
.fc-event {
border-radius: 0;
}
.fc-row .fc-content-skeleton {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.fc-content-skeleton table {
height: 100%
}
.fc-content-skeleton .fc-event-container {
vertical-align: bottom;
}
.fc-more-cell {
vertical-align: bottom;
}
a.fc-more {
position: relative;
display: block;
font-size: 0.85em;
line-height: 1.3;
border-radius: 3px;
border: 1px solid #3a87ad;
background-color: #3a87ad;
font-weight: normal;
color: #fff;
border-radius: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.js"></script>
<div style="border:solid 2px red;">
<div id='calendar'></div>
</div>
這裏的元素是什麼樣子的開發工具。你可以看到.fc-more-cell的內容是通過它的。