如何向此时间线添加其他部分？

Question

我想在我在 codepen 上找到的网站中添加一个时间线。

问题是，它只有三个部分（语义、相对、包含），我尝试添加另外两个部分，但布局被打乱并失去响应能力。

谁能指导我在该时间线中创建额外的部分而不失去它的响应能力？

HTML：

  <!-- STEPS -->
  <section id="Steps" class="steps-section">

    <h2 class="steps-header">
      Responsive Semantic Timeline
    </h2>

    <div class="steps-timeline">

      <div class="steps-one">
        <img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
        <h3 class="steps-name">
          Semantic
        </h3>
        <p class="steps-description">
          The timeline is created using negative margins and a top border.
        </p>
      </div>

      <div class="steps-two">
        <img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
        <h3 class="steps-name">
          Relative
        </h3>
        <p class="steps-description">
           All elements are positioned realtive to the parent. No absolute positioning.
        </p>
      </div>

      <div class="steps-three">
        <img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
        <h3 class="steps-name">
          Contained
        </h3>
        <p class="steps-description">
           The timeline does not extend past the first and last elements.
        </p>
      </div>

    </div><!-- /.steps-timeline -->

  </section>

CSS：

$outline-width: 0;
$break-point: 500px;

@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  font-family: lato;
}

$gray-base:     #999999;
$brand-primary: #3498DB; //Zen Blue

.section-header {
  color: $brand-primary;
  font-weight: 400;
  font-size: 1.4em;
}


.steps-header {
  @extend .section-header;
  margin-bottom: 20px;  
  text-align: center;
}
.steps-timeline {
  outline: 1px dashed rgba(red, $outline-width);

  @media screen and (max-width: $break-point) {
    border-left: 2px solid $brand-primary;
    margin-left: 25px;
  }

  @media screen and (min-width: $break-point) {
    border-top: 2px solid $brand-primary;
    padding-top: 20px;
    margin-top: 40px;
    margin-left: 16.65%;
    margin-right: 16.65%;
  }

  &:after {
    content: "";
    display: table;
    clear: both;
  }
}
.steps-one,
.steps-two,
.steps-three {
  outline: 1px dashed rgba(green, $outline-width);

  @media screen and (max-width: $break-point) {
    margin-left: -25px;
  }

  @media screen and (min-width: $break-point) {
    float: left;
    width: 33%;  
    margin-top: -50px;
  }
}
.steps-one,
.steps-two {
  @media screen and (max-width: $break-point) {
    padding-bottom: 40px;
  }
}
.steps-one {
  @media screen and (min-width: $break-point) {
    margin-left: -16.65%;
    margin-right: 16.65%;
  }
}
.steps-two {

}
.steps-three {
  @media screen and (max-width: $break-point) {
    margin-bottom: -100%;
  }
  @media screen and (min-width: $break-point) {
    margin-left: 16.65%;
    margin-right: -16.65%;
  }
}

.steps-img {
  display: block;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: 50%; 

  @media screen and (max-width: $break-point) {
    float: left;
    margin-right: 20px;
  }
}

.steps-name,
.steps-description {
  margin: 0;
}
.steps-name {
  @extend .section-header;

  @media screen and (min-width: $break-point) {
    text-align: center;
  }
}
.steps-description {
  overflow: hidden;

  @media screen and (min-width: $break-point) {
    text-align: center;
  }
}

Answer 1

您的 CSS 需要修改以在相同宽度内包含更多 div。现在，由于 div 是手动分配它们之间的间距而不是动态方法，因此您可以通过实验更改 width 和 margin 属性，并在 css 中包括 .step-four 和 .step-five。例如，我添加了一个额外的 div。您可以尝试通过这种方式添加更多内容。

CSS

$outline-width: 0;
$break-point: 500px;
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: lato;
}

$gray-base: #999999;
$brand-primary: #3498DB; //Zen Blue
.section-header {
  color: $brand-primary;
  font-weight: 400;
  font-size: 1.4em;
}

.steps-header {
  @extend .section-header;
  margin-bottom: 20px;
  text-align: center;
}

.steps-timeline {
  outline: 1px dashed rgba(red, $outline-width);
  @media screen and (max-width: $break-point) {
    border-left: 2px solid $brand-primary;
    margin-left: 0px;
  }
  @media screen and (min-width: $break-point) {
    border-top: 2px solid $brand-primary;
    padding-top: 20px;
    margin-top: 40px;
    margin-left: 10%;
    margin-right: 10%;
  }
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.steps-one,
.steps-two,
.steps-three,
.steps-four,
.steps-five{
  outline: 1px dashed rgba(green, $outline-width);
  @media screen and (max-width: $break-point) {
    margin-left: -25px;
  }
  @media screen and (min-width: $break-point) {
    float: left;
    width: 25%;
    margin-top: -50px;
  }
}

.steps-one,
.steps-two {
  @media screen and (max-width: $break-point) {
    padding-bottom: 40px;
  }
}

.steps-one {
  @media screen and (min-width: $break-point) {
    margin-left: -12%;
    margin-right: 12%;
  }
}

.steps-two {}

.steps-three,.step-four{
  @media screen and (max-width: $break-point) {
    margin-bottom: -100%;
  }
  @media screen and (min-width: $break-point) {
    margin-left: 10%;
    margin-right: -10%;
    float:right;
  }
}


.steps-img {
  display: block;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  @media screen and (max-width: $break-point) {
    float: left;
    margin-right: 10px;
  }
}

.steps-name,
.steps-description {
  margin: 0;
}

.steps-name {
  @extend .section-header;
  @media screen and (min-width: $break-point) {
    text-align: center;
  }
}

.steps-description {
  overflow: hidden;
  @media screen and (min-width: $break-point) {
    text-align: center;
  }
}

根据div的个数，可以改变下面的width属性。

.steps-one,
.steps-two,
.steps-three,
.steps-four,
.steps-five{
  outline: 1px dashed rgba(green, $outline-width);
  @media screen and (max-width: $break-point) {
    margin-left: -25px;
  }
  @media screen and (min-width: $break-point) {
    float: left;
    width: 25%;
    margin-top: -50px;
  }
}

举例

• 3 格 - 33%
• 4 格 - 25%
• 5 格 - 20%
• 等等