Как сделать вертикальную шкалу времени с помощью HTML, CSS и Flex - PullRequest
Новая
       12

Как сделать вертикальную шкалу времени с помощью HTML, CSS и Flex

0 голосов
/ 25 января 2019

Я делаю вертикальную шкалу времени с HTML и CSS.Моя идея - использовать CSS-границу для каждого шага.Я использую «border-right» для одного шага и «border-left» для следующего шага.Теоретически, это не сделало бы линию идеально посередине?Но линия не в середине.Линия выглядит разорванной.Это где мне нужна помощь.Можете ли вы взглянуть на мой CSS / HTML и помочь центру средней линии отлично?Я хотел бы сделать этот шаблон, чтобы при необходимости я мог копировать и вставлять каждый шаг навсегда.

Мне нужна помощь, чтобы выровнять центральную черную линию, чтобы выровнять ее по центру для всех шагов.Что я делаю не так? 

.step {
  display: flex;
}

.img-left,
.img-right {
  padding: 30px;
}

.info-right,
.info-left {
  padding: 30px;
}

.info-right {
  border-left: 1px black solid;
}

.info-left {
  border-right: 1px black solid;
}
<div class="timeline-holder">
  <h1>Timeline</h1>
  <div class="step">
    <div class="img-left">
      <img src="https://via.placeholder.com/150" />
    </div>
    <div class="info-right">
      <h2>Placeholder Title</h2>
      <p>Placeholder text. Placeholder text. Placeholder text. Placeholder text. Placeholder text.</p>
      <ul>
        <li>Placeholder text</li>
        <li>Placeholder text</li>
      </ul>
    </div>
  </div>
  <div class="step">
    <div class="info-left">
      <h2>Placeholder Title</h2>
      <p>Placeholder text. Placeholder text. Placeholder text. Placeholder text. Placeholder text.</p>
      <ul>
        <li>Placeholder text</li>
        <li>Placeholder text</li>
      </ul>
    </div>
    <!-- end .info-left -->
    <div class="img-right">
      <img src="https://via.placeholder.com/150" />
    </div>
  </div>
</div>

Показать на CodePen .

Ответы [ 2 ]

0 голосов
/ 25 января 2019

Сгибаемый элемент будет увеличиваться или уменьшаться в соответствии с пространством, доступным в его гибком контейнере. Вы должны контролировать это поведение с помощью свойства flex CSS . Также дайте вашим изображениям max-width. 

.step {
    display: flex;
}

.step img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.step h2 {
  margin-top: 0;
}

.step__left, .step__right {
    padding:30px;
    flex: 0 0 200px;
}

.step__right {
    border-left:1px black solid;
    background-color: rgba(0,255,0,0.1);
}

.step__left {
    border-right:1px black solid;
    background-color: rgba(255,0,0,0.1);
}
<div class="timeline-holder">
    <h1>Timeline</h1>
        <div class="step">
            <div class="step__left">
                <img src="https://via.placeholder.com/150"/>
            </div>
            <div class="step__right">
                <h2>Placeholder Title</h2>
                <p>Placeholder text. Placeholder text. Placeholder text. Placeholder text. Placeholder text.</p>
                <ul>
                    <li>Placeholder text</li>
                    <li>Placeholder text</li>
                </ul>
            </div>
        </div>
        <div class="step">
            <div class="step__left">
                <h2>Placeholder Title</h2>
                <p>Placeholder text. Placeholder text. Placeholder text. Placeholder text. Placeholder text.</p>
                <ul>
                    <li>Placeholder text</li>
                    <li>Placeholder text</li>
                </ul>
            </div>
            <div class="step__right">
                <img src="https://via.placeholder.com/150"/>
            </div>
        </div>
</div>
0 голосов
/ 25 января 2019 
.img-left, .img-right {
    padding:30px;
    flex:1;
}
.info-right,.info-left {
    padding:30px;
    flex:1;
}

+ Добавить "flex: 1;"чтобы сделать их равными по ширине.

...