html - 将垂直 CSS 时间轴转换为水平时间轴

Question

我需要对这个用简单的 HTML 和 CSS 制作的垂直时间轴进行一些更改。

现在，我的问题是:如何在不使用 transform: rotate(270deg); 命令的情况下将时间轴(和相关的 div)水平而不是垂直？

此外，时间轴上的点在调整浏览器窗口大小时并不能完全保持其位置，但到目前为止我还没有找到比使用 margin-left: 39.5% 更好的解决方案来保持他们在时间线上。谁能帮帮我？

Link: Here's the fiddle

.timeLine {
  position: relative;
  padding: 70px 0px;
  text-align: center;
  width: 100%;
  overflow: hidden;
}

.timeLine .lineHeader:after {
  content: '';
  width: 3px;
  position: absolute;
  top: 35px;
  bottom: 35px;
  left: 80%;
  border-radius: 50px;
  background-color: #405461;
  z-index: 9999;
}

.timeLine .lineFooter:before {
  position: absolute;
  bottom: 0;
  margin: auto;
  content: "\f103";
  font-family: FontAwesome;
  color: #405461;
  font-size: 36px;
  margin-left: -10px;
  left: 80%
}

.timeLine .item {
  float: left;
  margin-bottom: 2%;
  padding: 0px;
  clear: left;
  width: 80%;
}

.timeLine .item:before {
  content: '';
  width: 15px;
  height: 15px;
  border: 3px solid darkred;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  z-index: 10000;
  margin-left: 39.5%;
  margin-top: -6px;
}

.timeLine .item .caption {
  margin: 0px 0px 20px 100px;
  width: auto;
  background: #F0F0F0;
  min-height: 60px;
  position: relative;
  color: #333;
  border: 2px solid darkred;
  border-right: none;
  box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.5);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="timeLine">
  <div class="lineHeader"></div>
  <div class="lineFooter"></div>
  <div class="item">
    <div class="caption"></div>
  </div>
  <div class="item">
    <div class="caption"></div>
  </div>
  <div class="item">
    <div class="caption"></div>
  </div>
</div>

Answer 1

我稍微重构了您的代码，因为使用过高的 z-index 值不是一个好的做法。最好了解 z-index 的工作原理，而不是尝试任何人都无法控制的非常高的值。

脚本只是为元素动态定位。

$(document).ready(function() {
  var items = $(".item");

  for (var i = 0; i < items.length; i++) {
    var left = $(items[i]).data('left') + 'px';

    $(items[i]).css('left', left);
  };
});

.timeLine {
  position: relative;
  text-align: center;
  width: 100%;
  height: 500px;
  top: 40px;
}

.timeLine:after {
  content: '';
  height: 3px;
  width: calc(80%);
  position: absolute;
  left: 10%;
  border-radius: 50px;
  background-color: #405461;
}

.timeLine:before {
  position: absolute;
  right: 7%;
  content: "\f103";
  font-family: FontAwesome;
  color: #405461;
  font-size: 36px;
  transform: rotate(270deg);
  line-height: 3px;
}

.timeLine .item {
  margin-bottom: 2%;
  padding: 0px;
  width: 80%;
}

.timeLine .item:before {
  content: '';
  width: 15px;
  height: 15px;
  border: 3px solid darkred;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  left: -7.5px;
  top: -7.5px;
  z-index: 1;
}

.timeLine .item {
  margin: 0px 0px 20px 100px;
  width: 60px;
  background: #F0F0F0;
  min-height: 100px;
  position: relative;
  color: #333;
  border: 2px solid darkred;
  border-top: none;
  box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.5);
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="timeLine">
  <div class="item" data-left="0">
    <div class="caption">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
  </div>
  <div class="item" data-left="100">
    <div class="caption">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
  </div>
  <div class="item" data-left="200">
    <div class="caption">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
  </div>
</div>