-1
http://codepen.io/kjohnson/pen/azBvaE반응 형 타임 라인을 수정하는 방법은 무엇입니까?
내 친구와 나는이 웹 사이트에서 타임 라인을 사용하려고 생각하고 있습니다. 그러나 문제는 타임 라인에 추가해야하는 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;
}
}
단계가 33 % 너비로 설정되었습니다. 5 개의 요소를 사용하는 경우 단계를 20 %로 변경하십시오. 질문하기 전에 먼저 코드를 디버깅하려고하면 도움이 될 것입니다. –
나는 편집을 보았습니다. 자신의 코드를 디버깅하는 측면에서 좀 더 시도해야합니다. 물건을 검사하고 어디서 왜 왜 깨는 지 확인하십시오. 그래서 사람들이 당신을 위해 코드를 작성하지 않습니다 –
코드 샘플과 함께 아래 주어진 답변이 있습니다; 이 질문은 아직 열려 있습니까? 아니면 미해결입니까? 아닙니다. –