我以这种方式拥有这个位置,问题在于根据我所拥有的内容翻译每个div。 css就像:
.col-md-12 {
display: flex;
flex-wrap: wrap;
}
.col-md-12 input:checked + label {
color: red;
}
.col-md-12 input:checked + label + div.slider {
color: red;
}
.col-md-12 div.slide-1 {
left: -100%;
}
.col-md-12 div.slide-2 {
left: 0%;
}
.col-md-12 div.slide-3 {
left: 100%;
}
.col-md-12 input {
flex-basis: 3%;
margin-right: 27%;
order: 1;
}
.col-md-12 label {
flex-basis: 30%;
margin-top: 10px;
order: 2;
}
.col-md-12 .navigator {
flex-basis: 50%;
margin-top: 10px;
order: 3;
}
.col-md-12 .slider {
flex-basis: 100%;
margin-top: 10px;
order: 4;
width: 80%;
height: 250px;
position: absolute;
top: 70px;
}
,html就像这样
<div class="col-md-12">
<input type="radio" name="slider" class="slide-radio1" id="slider_1">
<label for="slider_1" class="page1">label 1</label>
<div class="slider slide-1 inner-container">
container 1
</div>
<input type="radio" name="slider" class="slide-radio2" checked id="slider_2">
<label for="slider_2" class="page2">label 2</label>
<div class="slider slide-2 inner-container">
container 2
</div>
<input type="radio" name="slider" class="slide-radio3" id="slider_3">
<label for="slider_3" class="page3">label 3</label>
<div class="slider slide-3 inner-container">
container 3
</div>
<!-----slider Navigator----->
<div class="navigator left">
<i class="fa fa-chevron-left" aria-hidden="true">nav left</i>
</div>
<div class="navigator right">
<i class="fa fa-chevron-right" aria-hidden="true">nav right</i>
</div>
</div>
我想在不使用类slide- *的情况下以相反的方向翻译每个div 100px,因为它们(div.slide)将动态生成。
答案 0 :(得分:0)
我建议您这样做,您可以使用transform: translateX(-100%)
将所有视图移出视图,然后将选中的视频移至transform: translateX(0);
.col-md-12 {
display: flex;
flex-wrap: wrap;
}
.col-md-12 input:checked+label {
color: red;
}
.col-md-12 input:checked+label+div.slider {
color: red;
}
.col-md-12 input+label+div.slider {
transform: translateX(-100%);
}
.col-md-12 input:checked+label+div.slider {
transform: translateX(0);
transition: transform 1s;
}
.col-md-12 input {
flex-basis: 3%;
margin-right: 27%;
order: 1;
}
.col-md-12 label {
flex-basis: 30%;
margin-top: 10px;
order: 2;
}
.col-md-12 .navigator {
flex-basis: 50%;
margin-top: 10px;
order: 3;
}
.col-md-12 .slider {
flex-basis: 100%;
margin-top: 10px;
order: 4;
background: lightgray;
width: 80%;
height: 250px;
position: absolute;
top: 70px;
}
&#13;
<div class="col-md-12">
<input type="radio" name="slider" class="slide-radio1" id="slider_1">
<label for="slider_1" class="page1">label 1</label>
<div class="slider slide-1 inner-container">
container 1
</div>
<input type="radio" name="slider" class="slide-radio2" checked id="slider_2">
<label for="slider_2" class="page2">label 2</label>
<div class="slider slide-2 inner-container">
container 2
</div>
<input type="radio" name="slider" class="slide-radio3" id="slider_3">
<label for="slider_3" class="page3">label 3</label>
<div class="slider slide-3 inner-container">
container 3
</div>
<!-----slider Navigator----->
<div class="navigator left">
<i class="fa fa-chevron-left" aria-hidden="true">nav left</i>
</div>
<div class="navigator right">
<i class="fa fa-chevron-right" aria-hidden="true">nav right</i>
</div>
</div>
&#13;