我无法将元素垂直对齐到底部

Question

我添加了一些代码以垂直对齐到 table 中的一些 td 元素（全日历事件）的底部。这是我的原创 post。我从给定的答案中添加了必要的代码，所有内容都在底部对齐。现在我想要另一个元素（多事件 link）也与底部对齐，但在开发者工具中它显示一条穿过 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 的内容有一条线穿过它。

Answer 1

开发者工具中 CSS 属性的那一行表示该设置已被覆盖。您可以看到 vertical-align: top 在上面的几行中设置了更具体的 CSS 。要解决这个问题，您的 fc-more-cell 选择器需要更具体地标识元素。添加 td 在我的测试中有效：

td.fc-more-cell {
  vertical-align: bottom;
}

CSS 与层叠样式表一样，根据 CSS 选择器的特殊性应用属性。更具体 = 更重要。

另一件事 - 该特定元素在 HTML 中获得 rowspan="1"。如果你想让它真正在一天的底部，那需要设置为 rowspan="2"。这看起来是由您正在使用的库设置的。除非它可以在该库中配置，否则您必须在 document.ready 块的底部使用 JavaScript 进行设置：

$('td.fc-more-cell').attr('rowspan', 2);

工作fiddle：https://jsfiddle.net/4v65ggos/25/

我无法将元素垂直对齐到底部

I can't vertically align element to bottom

html

javascript

css

fullcalendar