响应时间线向右移动点

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规则中考虑到这一点，所以在移动视图中你将flex-direction切换到row。

对于你的第二个问题（文本对齐），我没有看到任何问题？