Question

因此，在最近的几个论坛中，我设法解决了一些有关固定响应时间轴的问题。我从codepen.io复制了此文件，因为我懒得自己做一个人，第二个事实是，制作一个人可能会很复杂。

我现在的问题是当您将浏览器缩小到平板电脑/手机大小时，为什么我的左列时间轴不显示？当重新打开浏览器时，只有右列显示大小。

请运行代码段，并在整页中查看它，然后调整浏览器的大小。您会明白我的意思。

/* ==================== Timeline ==================== */

.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;
  display: flex;
  flex-direction: row-reverse;
}

.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;
    display: none;
    flex-direction: none;
  }
}

<div class="container">

  <div class="timeline-block timeline-block-right">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>Main Title</h3>
      <span>Year - year</span>
      <p>
        <span style="font-size: 16px; color: #666666;">Company name</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>Main Title Number 2</h3>
      <span>Year - year</span>
      <p>
        <span style="font-size: 16px; color: #666666;">Company name</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-right">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>Main Title Number 3</h3>
      <span>Year - year</span>
      <p>
        <span style="font-size: 16px; color: #666666;">Company name</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>Main Title Number 4</h3>
      <span>Year - year</span>
      <p>
        <span style="font-size: 16px; color: #666666;">Company name</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-right">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>Main Title Number 5</h3>
      <span>Year - year</span>
      <p>
        <span style="font-size: 16px; color: #666666;">Company name</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>
<!-- End of container div for the responsive timelime -->

Answer 1

媒体查询的左列设置了Connection connection = new Connection(host); connection.connect();。

display: none;

对于标记，有一个@media screen and (max-width: 800px) { .timeline-block-left { float: none; text-align: left; display: none; /* << remove this line */ flex-direction: none; } }可以反转块的方向：

flex-direction: row-reverse;

响应时间轴中的左列未显示

1 个答案: