如何以類似於Facebook時間軸的方式佈置我的內容div？

我喜歡Facebook時間軸與交錯的兩列帖子的佈局。我試圖用標準div和浮標創建相同的佈局。漂浮在一邊時漂浮物很好地工作，但不漂浮在另一邊。考慮到有多個高度的塊，你如何建議我最好的解決這個佈局？它將用於博客，我知道有人已經創建了一個WordPress模板，但是可以將佈局提取爲最簡單的形式嗎？在我的時間軸和WordPress模板上使用Chrome的開發人員窗口後，我正在努力尋找合適的CSS代碼並需要幫助。如何以類似於Facebook時間軸的方式佈置我的內容div？

我會把我有的作爲jsFiddle。如果您需要他們確認，我已經添加了額外的塊。

來源

2011-11-19 Nathan Bunn

正是因爲這個原因，我建議不要使用表格......當使用表格解決這個問題時，這麼多額外的工作正在進行中。 – Purag

但是，對於表格，我需要對每個塊高度進行特定的控制。如果我事先知道每個街區的高度，我會聽起來像一英鎊。由於我不這樣做，因爲它將會是一個博客，使用表格會導致更多的問題，即使是在跨行時也是如此。我需要它流動，流動。我發佈的例子工作到第5塊，並且不允許任何東西浮在它後面。 –

[這裏]（http://www.portablehtml.com/2012/09/how-to-build-facebook-timeline-with.html）是使用jquery，dust.js和webf的另一個時間軸實現 –

你必須左邊的容器被漂浮並清空左邊，右邊的容器被漂浮並清除。您可以使用JavaScript或您使用的任何服務器端語言來執行此操作。 jquery中的一些東西會是這樣的。

（一個完整的小提琴.. http://jsfiddle.net/gK2Vn/我會爲這個問題的基本框架。）

.item { 
    float: left; 
    clear: left; 
} 
.item.right { 
    float: right; 
    clear: right; 
} 

var left_column_height = 0; 
var right_column_height = 0; 
var items = $('.item'); 
for (var i = 0; i < items.length; i++) { 
    items.eq(i).height(Math.floor(Math.random() * 100) + 10); 
    if (left_column_height > right_column_height) { 
     right_column_height+= items.eq(i).addClass('right').outerHeight(true); 
    } else { 
     left_column_height+= items.eq(i).outerHeight(true); 

    } 
}

來源

2011-11-19 02:09:48 Mark