Question

我和我的朋友正考虑在我们的网站上使用该时间表。但问题是我们需要将5个部分添加到时间轴，而原始时间轴只有3个部分。

我已尝试在该代码中再添加两个部分，但它正在失去其形状和响应能力。

是否可以延长该时间表并保持其响应能力？

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

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

如果您是初学者，我建议您首先了解。当您知道您正在做的事情时，复制模板/代码段可以节省您的时间。

我找到了一个完美的教程here

只是为了强调这是我的观点，我希望它能以某种方式起作用。

编辑：如果仍然希望以这种方式开发here's具有完全响应水平时间轴的codepen代码段。只需在<li>

中添加更多<ul>

如何修改响应时间表？

1 个答案: