html - 我想让这个响应时间轴有 6 个步骤

Question

我需要 6 个步骤。我试了几个小时，我就是做不到。我敢肯定，对于更有经验的人来说，这并不难。我有几个 fork ，但都是死胡同。 你能帮帮我吗？

http://codepen.io/kjohnson/pen/azBvaE

HTML:

 <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 -->

CSS:

@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;
}

.section-header, .steps-header, .steps-name {
  color: #3498DB;
  font-weight: 400;
  font-size: 1.4em;
}

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

.steps-timeline {
  outline: 1px dashed rgba(255, 0, 0, 0);
}
@media screen and (max-width: 500px) {
  .steps-timeline {
    border-left: 2px solid #3498DB;
    margin-left: 25px;
  }
}
@media screen and (min-width: 500px) {
  .steps-timeline {
    border-top: 2px solid #3498DB;
    padding-top: 20px;
    margin-top: 40px;
    margin-left: 16.65%;
    margin-right: 16.65%;
  }
}
.steps-timeline:after {
  content: "";
  display: table;
  clear: both;
}

.steps-one,
.steps-two,
.steps-three {
  outline: 1px dashed rgba(0, 128, 0, 0);
}
@media screen and (max-width: 500px) {
  .steps-one,
  .steps-two,
  .steps-three {
    margin-left: -25px;
  }
}
@media screen and (min-width: 500px) {
  .steps-one,
  .steps-two,
  .steps-three {
    float: left;
    width: 33%;
    margin-top: -50px;
  }
}

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

@media screen and (min-width: 500px) {
  .steps-one {
    margin-left: -16.65%;
    margin-right: 16.65%;
  }
}

@media screen and (max-width: 500px) {
  .steps-three {
    margin-bottom: -100%;
  }
}
@media screen and (min-width: 500px) {
  .steps-three {
    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: 500px) {
  .steps-img {
    float: left;
    margin-right: 20px;
  }
}

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

@media screen and (min-width: 500px) {
  .steps-name {
    text-align: center;
  }
}

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

Answer 1

我猜你想要这样的东西？

http://codepen.io/adamk22/pen/LGQQKz

$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: 8%;
    margin-right: 8%;
  }

  &:after {
    content: "";
    display: table;
    clear: both;
  }
}
.steps-one,
.steps-two,
.steps-three,
.steps-four,
.steps-five,
.steps-six{
  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: 12%;  
    margin-top: -50px;
  }
}
.steps-one,
.steps-two,
.steps-three,
.steps-four,
.steps-five,
.steps-six{
  @media screen and (max-width: $break-point) {
    padding-bottom: 40px;
  }
}
.steps-one {
  @media screen and (min-width: $break-point) {
    margin-left: -8%;
    margin-right: 8%;
  }
}
.steps-two {
    @media screen and (min-width: $break-point) {
    margin-right: 8%;
  }
}
.steps-three {
  @media screen and (min-width: $break-point) {
    margin-right: 8%;
  }
}

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

.steps-five {
}

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

}

.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;
  }
}

大多数更改都需要您更改 CSS，尤其是您在笔中看到的媒体查询。