2012-09-05 69 views
0

我必須制定一個小小的時間表概述。 我的問題是發生在午夜的事件。將一個div集中在兩個其他div上

我想要做的是:

在左邊我有一個「列」(我用div的工作)與天。 在第一列旁邊的第二列中,我有我的活動。

沒問題,對於在同一天開始和結束的事件。 活動是沒有文字,這是花哨的divs,一些添加信息和圖標,但在這裏,我會將它們顯示爲文本。

 
2012-02-25 Event 1 (8:00-11:00) 
       {Some space} 
       Event 2 (13:00-15:00) 
       {20px space} 
-------------------------------------------- 
2012-02-26 {20px space} 
       Event 3 (8:00-11:00) 
       {Some space} 
       Event 4 (13:00-15:00) 

好! 但是現在,對於午夜發生的事件,我希望將事件div放置在劃分兩天和居中的行之上,因此每個事件div具有30px高度,行高度爲2px,這意味着我想擁有startdate上的通宵事件14px,enddate上的14px。

每一天「行」也是一個div。所以我希望隔夜事件放在兩個「行」div和行(可能是<hr>,也許<div>)之上。

現在我的問題,這是可能的,如果是的話,怎麼樣?

問候

編輯:

這裏一個的jsfiddle:http://jsfiddle.net/NoiZy/6Dkta/

現在一個額外的事件應該放在紅線之上的每一天的一半大小隨。

+0

分享,你在jsfiddle.net嘗試過什麼? –

+0

所有事情都是可能的......你需要的東西就是創造力與練習,所以第一個問題你試過了什麼? –

+0

我添加了一個jsFiddle – SharpNoiZy

回答

1

我可能會這樣做http://jsfiddle.net/6Dkta/61/ 將每一天的行設置爲'position:relative',那麼重疊的事件我給了一個類,以便您可以動態添加。 Class twoDay將位置設置爲絕對值,最低值爲-34px。這樣,無論行的大小如何,它總是會重疊在底部。不知道這是否適用於您的設置,但它可以在小提琴上工作。

+0

THX,像charme一樣工作! 但你能解釋我嗎,爲什麼你設置了一天的「排名:相對」排?這在這種情況下是什麼? – SharpNoiZy

+0

我們希望將相對於某一天的位置而不是相對於身體或其他父母的位置說出來。如果包含所有日子的元素是相對的,並且每天都不是,那麼事件會將絕對定位到該div。這意味着底部1px將放置在所有日子的底部與其中的底部。如果您希望孩子與父母相對,那麼父母必須是親戚和孩子絕對的。這是一個很好的詮釋,當我感到困惑時解釋它http://www.barelyfitz.com/screencast/html-training/css/positioning/ –