如何在此時間表中添加其他部分？

我想在我的網站上放置一個時間表，我在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; 
    } 
}

來源

2016-08-16 Sandy

你的CSS需要進行修改，以包括相同的寬度內更多的div。現在，因爲div是在它們之間手動分配空間而不是動態方法，所以您可以通過實驗將和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格 - 25％
5周的div - 20％
等

來源

2016-08-16 05:10:40

如何在此時間表中添加其他部分？

回答

相關問題