html - 响应时间轴向右移动点

Question

所以从我的响应时间表来看。我能够在我的上一个论坛之后解决我的问题，现在我无法尝试让我左栏上的蓝点位于时间线中间的中心线上。右列看起来不错，现在左列的点需要居中。

还有一个小问题。我注意到在我的右栏中，文本完全“左对齐”，而左栏中的文本不是“右对齐”。

当您运行代码片段时，我建议您查看整个页面以了解我在说什么。

正如你所知，我从 codepen.io 复制了这个，因为我懒得制作自己的响应式时间轴，而且制作时间轴可能会非常复杂，因为制作时间轴的方法太多了.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}

h1 {
  text-align: center;
  font-weight: 300;
  color: #777
}

h1 span {
  font-weight: 600;
}

.container {
  width: 80%;
  padding: 50px 0;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
  font-family: sans-serif;
}

.container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 100%;
  background: #CCD1D9;
  z-index: 1;
}

.timeline-block {
  width: -webkit-calc(50% + 8px);
  width: -moz-calc(50% + 8px);
  width: calc(50% + 8px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  justify-content: space-between;
  clear: both;
}

.timeline-block-right {
  float: right;
}

.timeline-block-left {
  float: left;
  text-align: right;
}

.marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #F5F7FA;
  background: #4FC1E9;
  margin-top: 10px;
  z-index: 9999;
}

.timeline-content {
  width: 95%;
  padding: 0 15px;
  color: #666;
}

.timeline-content h3 {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 25px;
  font-weight: 500;
}

.timeline-content span {
  font-size: 15px;
  color: #a4a4a4;
}

.timeline-content p {
  font-size: 14px;
  line-height: 1.5em;
  word-spacing: 1px;
  color: #888;
}


/* ==================== Timeline Media Queries ==================== */

@media screen and (max-width: 800px) {
  .container:before {
    left: 8px;
    width: 2px;
  }
  .timeline-block {
    width: 100%;
    margin-bottom: 30px;
  }
  .timeline-block-right {
    float: none;
  }
  .timeline-block-left {
    float: none;
    text-align: left;
  }
}

<div class="container">

  <div class="timeline-block timeline-block-right">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>This is a test</h3>
      <span>Testing</span>
      <p>
        <span style="font-size: 16px; color: #666666;">This is a mini title</span>
        <br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
        book.
      </p>
    </div>
  </div>

  <div class="timeline-block timeline-block-left">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>This is a test</h3>
      <span>Testing</span>
      <p>
        <span style="font-size: 16px; color: #666666;">This is a mini title</span>
        <br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
        book.
      </p>
    </div>
  </div>


</div>

Answer 1

对于您的主要问题(将左浮动时间线元素的蓝点居中):

将以下内容添加到 .timeline-block-left

display: flex;
flex-direction: row-reverse;

这基本上颠倒了两个元素(标记和文本)，同时保持您的 HTML 结构。总的来说，你应该更多地使用 flexbox；它有很多功能。

同样，您应该在响应式@media 规则中考虑到这一点，因此在移动 View 中时，您可以将flex-direction 切换为row。

对于您的第二个问题(文本对齐)，我没有发现任何问题？