Адаптивная временная шкала переместить точку вправо - PullRequest
Новая
       8

Адаптивная временная шкала переместить точку вправо

0 голосов
/ 20 февраля 2019

Итак, из моего отзывчивого графика времени.Я смог исправить свою проблему после моего последнего форума, и теперь у меня возникают проблемы при попытке получить мою синюю точку, которая находится в моей левой колонке, чтобы быть в этой центральной линии в середине временной шкалы.Правый столбец выглядит хорошо, теперь точка левого столбца должна быть в центре.

Также небольшая проблема.Я заметил, что в моем правом столбце текст «выровнен по левому краю» идеально, тогда как текст в левом столбце не выровнен по правому краю.

Когда вы запускаете фрагмент кода, яПредлагаю вам просмотреть его на полной странице, чтобы понять, о чем я говорю.

Просто чтобы вы знали, я скопировал это из 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>

1 Ответ

0 голосов
/ 20 февраля 2019

Для вашей основной проблемы (центрирование синей точки для элементов левой шкалы времени):

Добавьте следующее к .timeline-block-left

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

Это, по сути, меняет два элемента (маркери текст), в то же время поддерживая вашу структуру HTML.В целом вам, вероятно, следует больше использовать flexbox;в этом много силы.

Кроме того, вы должны учитывать это в своих адаптивных правилах @media, поэтому в мобильном представлении вы переключаете flex-direction на row.

Для вашей второй проблемы (выравнивание текста) я не вижу проблем?

...