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。

对于您的第二个问题（文本对齐），我看不到任何问题吗？

响应时间轴将点向右移

1 个答案: