使用 CSS 居中 HTML 时间轴结构？只有侧面缩放？

Question

好吧，我尝试用 CSS 创建这个结构，但我的所有尝试都没有产生正确的结果，我尝试在互联网上搜索帮助，并找到了一些时间轴结构指南但是 none 他们似乎做了我想做的事。

所以这是我的基本结构：

所以这里的想法是 window 分辨率宽度为 1800px，结构是一些 div 容器，浅灰色背景，以某种方式居中，边距：0 auto 或其他带有 1200px 的设置。然后充当页面的backbone的是居中的中间红色时间轴，并保持相同的设置宽度，而不是百分比。在左右两侧的时间轴周围，将有这些工具提示类型框，它们会根据文本量调整高度。

接下来，如果您将 window 分辨率调整为 1000 像素宽度，因此小于浅灰色区域。中间时间线保持相同的设置宽度，但工具提示框的宽度发生变化，高度增加，因为缺少水平 space，而是使用垂直 space。工具提示框将与时间轴保持相同的距离，比方说 15px，因此它们的宽度必须从两侧减小，这就是我运行撞墙的地方。

我自己想象的方式是将时间轴从模块中构建出来，如下所示，因此工具提示将对应于时间轴的一部分，然后带有工具提示的时间轴将堆叠在每个模块上其他。但任何解决方案都值得赞赏，

这里是 link 我目前所拥有的：http://codepen.io/anon/pen/wWZwGL

* {
  margin: 0px;
  font-family: sans-serif;
}

.timezone{
  margin-bottom: 10px;
  position: relative;
  padding: 5px 0;
}

.timezone > div {
  display: inline-block;
  box-sizing: border-box;
}

.timeline {
  width: 100px;
  background: darkred;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.event_left {
  margin-left: 1%;
  width: calc(49% - 1% - 20px);
  background: #ededed;
  position: relative;
  vertical-align: middle;
  padding: 10px;
}

.event_right {
  width: calc(45% - 1% - 30px);
  background: #ededed;
  margin-left: calc(2% + 40px);
  position: relative;
  vertical-align: middle;
  padding: 10px;
}

.left {
  width: 50%;
  height: 100px;
  float: left;
}

.right {
  width: 50%;
  height: 100px;
  float: left;
}

<div class="content">
  <div class="timezone">
    <div class="event_left">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
    <div class="timeline">34.000 BNC</div>
    <div class="event_right">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>
</div>

我试图实现工具提示缩放的地方，它并不接近完美，时间轴高度甚至不随工具提示高度调整:(

有什么建议吗？

Answer 1

在没有其余代码的情况下，我使用了一些我的代码。简要解释一下，我将 "timeline" 深红色条居中并给它 2% 的宽度，然后相应地定位其他条，宽度为 49% - 1% - 20px，其中 20px 是到酒吧。

右侧的 margin-left 为 2%（条的宽度）+ 到条的距离的两倍（我们不想忽略左侧的边距）这是计算右侧的方式：

    .level .right {
        width: calc(49% - 1% - 20px);
        margin-left: calc(2% + 40px);
        vertical-align:middle;

可以查看完整的代码笔here。希望能帮上忙！

使用 CSS 居中 HTML 时间轴结构？只有侧面缩放？

centered HTML timeline structure using CSS? With only the sides scaling?

html

css

timeline