2015-04-06 87 views
0

我添加了一些代碼來垂直對齊表格內的某個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的內容是通過它的。 enter image description here

回答

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

工作小提琴:https://jsfiddle.net/4v65ggos/25/