序

在过去，类似时间轴的结构几乎是一条灰色的直线，一直向下飞，没有尽头。今天这条线是从第一个点到最后一个点，那么问题来了，内容的高度是不固定的，怎么确定线的长度呢？我们怎么能从第一点到最后一点首尾相连呢？这就是我们要做的。

先看效果，如下图：

思考：

1.写一个div把整个内容包起来，就可以知道所有列表的总高度；

2.写一条细线，放在右边。是的，高度100%，内容高，细线高；

3.起点离顶多高，细线离顶多高；

4.使用js设置细线的高度=总高度-最后一个列表的高度；

！什么事？不识字？没关系，我用一句话总结一下：用细线的高度减去最后一个内容的高度正好。

实现方法

第一步：写结构

div class=' line _ box ' div class=' line '/div ullii/我好帅好不要脸！写多长不重要，反正合适的行会自己适应的！span/span/Li Li/我没办法，就是这么帅，就是这么可爱！span/span/Li Li/我帅到能自然醒来，帅到能闪到腰！Span/span/li /ul /div(1)设置一条细灰色线。

(2)每项内容为一个李

(3)我是三角形(什么？不会用CSS画三角形？百度一下，你就知道了)

(4)跨度是小红点

第二步：写风格

样式类型='text/css '。line _ box { width: 200pxmargin: 0 auto相对位置：} .线{ width: 2px高度： 100%；背景色： # CCC；绝对位置：left : 0；top: 20px} ul { padding-left : 20px；} li { padding: 10px背景-color : # CB 3636；color: # fff相对位置：边距-bottom : 20px；} li i {border: 10px固体；border-color : transparent # CB 3636透明透明；绝对位置：left :-18px；top: 10px} li span { width:10pxheight: 10px背景-color : # CB 3636；绝对位置：left :-24px；top: 15px边界半径：50%；}/style(1)好像没什么好说的。

(2)哈哈，我想到了。画三角形的原理是把一个边框设为红色，另外三个边设为透明，就像这样：

border-color:transparent红色透明透明；方向依次是从上到下到右和从下到左

第三步：编写js代码

(函数hei(){ var li=$('li ')，len=li.length，he=$(')。line _ box’)。outerHeight()，old=li.eq(len - 1)。outhealth()；$('.行')。身高(数(他)-数(老))；}());(1)获得最外层的高度he

(2)获取最后一个内容的高度

(3)总高度为(1)-(2)

(4)这里使用outhealth()的原因是为了包含填充和边框的高度。

总结：

这一次，细线的高度是通过从总高度中减去最后一个内容的高度来计算的。当然，还有其他方法，但最好通过添加一个调整大小来监控浏览器更改，从而重置细线的高度。

这里用的是百度CDN:

脚本类型=' text/JavaScript ' src=' http :http://apps . bdimg.com/libs/jquery/2 . 1 . 4/jquery . min . js '/脚本完整代码为：

！DOCTYPE html html lang=' en ' hearta charset=' utf-8 ' style type=' text/CSS ' .line _ box { width : 200 pxmargin : 0 auto相对位置：}.线{ width: 2px高度： 100%;背景色： # CCC绝对位置：左： 0；top : 20px } ul { padding-left : 20px；} li { padding: 10px背景-颜色： # CB 3636color: # fff相对位置：边距-底部： 20px}li i {border: 10px固体；边框颜色：透明# CB 3636透明透明；绝对位置：左侧：-18px；top: 10px} li span {宽度： 10px重量： 10px背景-颜色： # CB 3636绝对位置：左侧：-24px；top: 15px边界半径： 50%;}/style/head dydiv class=' line _ box ' div class=' line '/div ul LII/I就是这么帅，就是这么不要脸！就是这么帅，就是这么不要脸！span/span/Li Li/I没办法，就是这么帅，就是这么叼！span/span/Li Li/I帅到自然醒，帅到闪到腰！span/span/Li/ul/div脚本类型=' text/JavaScript ' src=' http :http://apps。bdimg。com/libs/jquery/2。1 .4/jquery。量滴js '/script script $(function(){(function hei(){ var Li=$(' Li ')，len=li.length，he=$().line _ box’).外部高度()，旧=li.eq(len - 1).outhealth()；$('.行')。身高（数（他)-数（老));}());})/脚本/正文/html好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。