Question

我正在创建一个水平时间轴，除了从子弹到水平线绘制垂直线之外，我还解决了大部分问题。

我想要实现的是将even和odd类的项目符号连接到中间的水平线。由于div.even和div.odd的高度和宽度可能不同，我认为我需要使用JQuery来了解每个div.even和{的垂直线的适当高度。 {1}}

这是我的作品

＆＃13;

div.odd

＆＃13;

.timeline-container {
  position: relative;
  min-height: 300px;
  margin-bottom: 30px;
}

.timeline-container .odd, .timeline-container .even {
  position: relative;
  display: inline-block;
  font-size: 10px;

  
}


.odd {
  padding-bottom:1px;
  
}

.even:before {
  content: "\2219 ";
  width: 50px;
  position:relative;
  left: 50%;
}

.odd:after {
  content: "\2219";
  position: relative;
  left:50%;
}

.even {
  top: 200px;
  
}

＆＃13;

https://jsfiddle.net/7ajbvgcj/

我正在尝试使用<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <section class="timeline"> <div class="container-fluid"> <div class="row"> <div class="col-lg-12 text-center"> <h1>Timeline</h1> </div> </div> <div class="row"> <div class="col-lg-12"> <div class="timeline-container"> <hr style="position:absolute; top: 40%; border:1px solid #717171; width:100%"/> <div style="position: absolute; left:416px; top:77px; border-left: 1px solid black; "> </div> <div class="odd"> <h5>Year 2014</h5> </div> <div class="even"> <h4>March 2015 achievement</h4> <p>Short description that best describe the event</p> </div> <div class="odd test"> <h4>March 2015 achievement</h4> <p>Short description that best describe the event</p> </div> <hr width="1" size="100" style="position: absolute; border:1px solid #717171;z-index:20" > <div class="even"> <h4>March 2015 achievement</h4> <p>Short description that best describe the event</p> </div> </div> </div> </div> </div> </section>绘制垂直线，方法是将宽度设置为1，将尺寸设置为我想要的高度，但它似乎无效。

hr

任何提示？

由于

Answer 1

<div class="comments">
  <comment ng-repeat="comment in comments" comment-data="comment"></comment>
</div>

将此css应用于hr，它将是一条垂直线。请检查并回复

Answer 2

为何选择HR？只需使用div和绝对位置：

div.class {
    position: absolute;
    top:0; left:0;
    min-height:300px;
    border-left: 1px solid black;
}

hr只会让事情复杂化。它是作为水平标尺制作的，因此名称为<hr>。

使用CSS和JQuery绘制垂直线

2 个答案: