我正在尝试对元素产生时间线影响。我做了一些研究,发现 this exemple
而且,如您所见here ,它不能很好地工作......这是成功的部分:
section#lastPost {
width: 960px;
margin: 0 auto; }
section#lastPost .TLItem {
clear: left;
float: left; }
section#lastPost .TLItem:nth-child(2n) {
clear: right;
float: right; }
好吧,如您所见,存在一点空间问题:)
有什么想法吗?
最佳答案
您基本上需要知道每个 block 的高度才能将其短路。您的答案取决于这篇文章: How do I lay out my content divs in a similar manner to Facebook Timeline?
你可以在这里看到工作中的 fiddle : http://jsfiddle.net/gK2Vn/
在某种程度上你需要添加以下脚本:
$(document).ready(function() {
var left_column_height = 0;
var right_column_height = 0;
var items = $('section#lastPost #TL .TLItem');
for (var i = 0; i < items.length; i++) {
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);
}
}
});
并将您的 CSS 更改为:
section#lastPost #TL .TLItem {
clear: left;
float: left;
}
section#lastPost #TL .TLItem.right {
clear: right;
float: right;
}
关于html - HTML/CSS 时间线效果的一些问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14383184/