Html 我想将这一响应时间安排分为6个步骤

我需要6个步骤。我试了好几个小时，就是没法成功。我很确定这对更有经验的人来说并不难。我有好几把叉子，但都是死胡同。 你能帮帮我吗

HTML:

---

我猜你想要这样的东西

---

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

想详细说明一下吗？你说的6步是什么意思？也许能证明你想要的结果？谢谢你检查密码笔，我认为它很明显。目前它有3个步骤，它们之间的距离相等。我想要6个。6个圆圈，6个标题，6个段落，在一行中彼此距离相等。调整窗口大小后，它会“折叠”为垂直时间线。谢谢我真不敢相信你在几分钟内就做到了完美，而我却花了好几个小时。你是我的英雄。非常感谢。我最近回来玩这个游戏，因为我想完全理解它背后的一切。我现在已经很好地掌握了它，但是如果我更改值以适应不同数量的步骤，我会在小屏幕上遇到时间线问题。你能帮我一下吗，为什么小屏幕上的左边框太长了？我似乎不能很好地修复它，只是用了一些老套的方法，“只治疗症状”。谢谢如果你打开steps timeline类的背景，你会注意到时间线边框的长度取决于放置在该div中的内容量。如果你减小屏幕大小，你会注意到过长的边框是由文本引起的。因此，解决此问题的一种方法是在类步骤描述的最后一个子级上使用负边距，并使用媒体查询。这不是一个理想的解决方案，但话说回来，这也不是一个理想的时间线制作方法：-）看：谢谢：）现在我明白了。非常感谢。嗯，我意识到这不是制作时间线的最佳方式，我一直在寻找创建这样一个时间线的方法，它会像这样崩溃，但我没有找到更好的方法。不幸的是，我还没有找到更好的方法。再次感谢你

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

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

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