我不能垂直对齐一个元素到底部 [英] I can't verticaly align an element to bottom

问题描述

我想让我的fullcalendar.io事件显示在一天的底部，而不是在中间。我一直在尝试修改不同的元素vertical-align：bottom，但似乎没有什么工作。这是指向我的

I'm trying to get my fullcalendar.io event to show up at the bottom of the day instead of in the middle. I've been trying to modify different elements to vertical-align: "bottom" but nothing seems to work. Here is a link to my fiddle that has different css overloaded calls to set the vertical-alignment to bottom for a calendar event. Currently the event is placed in the middle of the day, I want it at the bottom of the cell.

$(document).ready(function() {

    // page is now ready, initialize the calendar...
    var eventsArray = [
            {
                title: 'Test1',
                start: new Date()
            },
            {
                title: 'Test2',
                start: new Date(2015, 4, 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
    })

});

//all the different things I've tried!!!!!!!
tbody {
    vertical-align: bottom;
}

tr td.fc-event-container {
    vertical-align: bottom;
}
td.fc-event-container {
    vertical-align: bottom;
}

td {
    vertical-align: bottom;
}

.fc-event-container {
    vertical-align: bottom;
}

tr {
    vertical-align: bottom;
}

<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>

I inspected the elements in the explorer window in Chrome and I'm not sure which element needs the vertical alignment set. Here is a pic of the elements in Chrome.

解决方案

Two issues:

1) the containing element isn't 100% of the "cell" height (which is set by a second "skeleton" table)

2) the vertical-align is overriden, so we'll need to increase specificity

Here's the CSS that will set the height to 100%:

.fc-row .fc-content-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.fc-content-skeleton table {
    height: 100%
}

And finally, to increase specificity:

.fc-content-skeleton .fc-event-container {
    vertical-align: bottom;
}

(Or, we could add !important)

An updated fiddle: https://jsfiddle.net/4v65ggos/13/

这篇关于我不能垂直对齐一个元素到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！