html - 如何向此时间轴添加其他部分？

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 属性并包括 .step-four & .step-five 在 css 中也是如此。例如，我添加了一个额外的 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 个 div - 33%
• 4 个 div - 25%
• 5 格 - 20%
• 等等