将垂直 CSS 时间线变成水平时间线

Question

我需要对这个垂直时间轴做一些改动，它已经用简单的 HTML 和 CSS 完成了。

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

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

.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>

将垂直 CSS 时间线变成水平时间线

Turning a vertical CSS timeline into a horizontal one

html

css

timeline

pseudo-element