如何使用 HTML、CSS 和 Flex 制作垂直时间线

Question

我正在用 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。

Answer 1

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

+添加"flex:1;" 使它们等宽。

Answer 2

弹性项目将扩大或缩小以适应其弹性容器中可用的 space。您必须使用 flex CSS property 来控制该行为。同时给你的图片一个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>

如何使用 HTML、CSS 和 Flex 制作垂直时间线

How to make a vertical timeline with HTML, CSS, and Flex

html

css

flexbox

timeline