为时间轴定位圆和线

Question

我想在我的网站上实现时间表部分。

我已经了解它的外观，但我认为没有任何好办法。

外观如何：

实际代码： js fiddle

<div class="right ">
    what should I put here to get that circle?
</div>

最令人困惑的部分是如何将这个圈子和那条线放在一起？

有人可以提出任何建议吗？

谢谢。

Answer 1

您可以使用:after，根据自己的喜好更改样式。

.border需要非静态定位。

＆＃13;

＆＃13;

.wrapper {
  width: 1030px;
  background-color: #534741;
  height: 500px;
}
.right {
  color: #fff;
  width: 90%;
  text-align: right;
  padding: 10px 10px 0 0;
  display: block;
}
.border {
  border-bottom: 2px solid #000;
  width: 50%;
  float: right;
  margin: 10px 140px 0 10px;
  position: relative;
}
.border:after {
  /* Position and border */
  display: block;
  content: '';
  border: 2px solid #000;
  position: absolute;
  width: 32px;
  right: -34px; /*** -(Width+Border) ***/
  height: 32px;
  bottom: -18px; /***  -((Height/2)+Border)  ***/
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.text {
  float: right;
  width: 300px;
  margin-right: 90px;
}

＆＃13;

<div class="wrapper">
  <div class="right">
    <h2>Text</h2>
  </div>
  <div class="right">
    <h3>2014</h3>
  </div>
  <div class="right "></div>
  <div class="right border"></div>
  <div class="right text">
    <p>Lorem ipsum doloremLorem ipsum doloremLorem ipsum doloremLorem ipsum doloremLorem ipsum dolorem</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

JSFiddle

Answer 2

下面的代码应该有效：

    
.box-with-circle {
    width: 90%;
    position: relative;
}
.box-with-circle .circle {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    margin -20px 0 0 -20px;
    border: 1px solid #000;
    background-color: #fff;
    z-index: 1;
    border-radius: 50%;
}
.box-with-circle hr {
   position: relative;
   top: 20px;
}

 <div class="box-with-circle">
    <div class="circle"></div>
    <hr />
 </div>

Answer 3

尝试使用定位和钻孔半径。或者只是使用图像。

＆＃13;

＆＃13;

.content-wrapper {
  position: relative;
  width: 400px;
  margin-bottom: 30px;
}
.line .circle {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  border: 1px solid black;
  position: absolute;
  top: -25px;
}
.line {
  position: relative;
  border-bottom: 1px solid black;
}
.odd .line {
  margin-right: 50px;
}
.even .line {
  margin-left: 50px;
}
.odd .circle {
  right: -50px;
}
.even .circle {
  left: -50px;
}
.content,
.header {
  padding: 0 60px;
}
.odd .content,
.odd .header {
  text-align: right;
}
.even .content,
.even .header {
  text-align: left;
}

＆＃13;

<div class="content-wrapper odd">
  <div class="header">Some title</div>
  <div class="line">
    <div class="circle"></div>
  </div>
  <div class="content">Loerm ipsum dolerom</div>
</div>
<div class="content-wrapper even">
  <div class="header">Some title</div>
  <div class="line">
    <div class="circle"></div>
  </div>
  <div class="content">Loerm ipsum dolerom</div>
</div>

＆＃13;

＆＃13;

＆＃13;