Question

我需要对此垂直时间轴进行一些更改，该时间轴已使用简单的HTML和CSS进行了更改。

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

此外，在调整浏览器窗口大小时，时间轴上的点并不能完美地保持其位置，但是到目前为止，我还没有找到比使用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

我重构了您的代码，因为使用太高的SELECT user_id, company_id FROM (select payment_detail_table.user_id AS user_id,payment_detail_table.company_id AS company_id from payment_detail_table where (EXISTS(SELECT * FROM payment_table WHERE payment_table.payment_id=payment_detail_table.payment_id AND payment_table.payment_type=1)) AND payment_detail_table.payment_status = 2 group by concat(payment_detail_table.user_id,'-',payment_detail_table.company_id)) T1 INNER JOIN (SELECT payment_detail_table.user_id AS user_id,payment_detail_table.company_id AS company_id FROM (select payment_detail_table.user_id AS user_id,payment_detail_table.company_id AS company_id from payment_detail_table where (EXISTS(SELECT * FROM payment_table WHERE payment_table.payment_id=payment_detail_table.payment_id AND payment_table.payment_type=0)) AND payment_detail_table.payment_status = 2 group by concat(payment_detail_table.user_id,'-',payment_detail_table.company_id)) T2 USING (user_id, company_id)值不是一个好主意。最好学习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;
}

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

1 个答案: