滾動X與格

Question

我想作出一些滑塊在我自己的方式，但它似乎什麼不好：

我：

<div class="slider"> 
<div class="img first"></div> 
<div class="img second"></div> 
<div class="img third"></div> 
</div> 

.slider{width: 100%; max-height: 100%; overflow: hidden;} 
//I don't want to see scrolls 
.img{width: 100%; height: 100%; float: left;} 
.first{background: red;} 
.second{background: blue;} 
.third{background: green;} 

基本上我想要的是有這樣的：

100%  100% 100% 
+-------+--------+-------+ 
+-------+ 
| 100% | 
|first | second third 
+-------+ 
+------------------------+ 

問題是，我的div下一個下一個..是浮動的問題：左？

Answer 1

從你的代碼解釋給我的上面，它看起來像你的滑塊每個幻燈片將成爲一個圖像。如果是的話，我建議改變你的滑蓋下面的下面的代碼：

代碼片段：

.slider { 
 
    width: 100%; 
 
    max-width: 960px; 
 
    overflow: hidden; 
 
} 
 

 
.slider figure img { 
 
    width: 25%; 
 
    float: left; 
 
    height: auto; 
 
} 
 

 
.slider figure { 
 
    width: 400%; 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    animation: 10s slide infinite; 
 
    -webkit-animation: 10s slide infinite; 
 
} 
 

 
@-webkit-keyframes slide { 
 
    0% { 
 
    left: 0%; 
 
    } 
 
    16% { 
 
    left: 0%; 
 
    } 
 
    33% { 
 
    left: -100%; 
 
    } 
 
    49% { 
 
    left: -100%; 
 
    } 
 
    66% { 
 
    left: -200%; 
 
    } 
 
    82% { 
 
    left: -200%; 
 
    } 
 
    100% { 
 
    left: -300%; 
 
    } 
 
}

<div class="slider"> 
 
    <figure> 
 
    <img src="https://i.ytimg.com/vi/mxbzT3uYXxE/maxresdefault.jpg"> 
 
    <img src="http://cdn.playbuzz.com/cdn/1af8dfed-eacb-4228-8219-8781715daa2d/115aad8d-8eee-45e4-b439-450602e843fd.jpg"> 
 
    <img src="http://www.majorspoilers.com/wp-content/uploads/2011/08/MSC6.jpg"> 
 
    <img src="http://static.srcdn.com/wp-content/uploads/franklin-richards.jpg"> 
 
    </figure> 
 
</div>

而不是每次打電話給你img類具有特定DIV，我們可以而只需使用實際的img標籤。除此之外，在這種方法中，我使用了keyframes css來控制幻燈片圖像的位置。

如果你真的想與div內容來控制這一點，你可以簡單地包裹圖像您div和改變類.slider figure img到.slider figure div包括其他類型的內容。

我希望這可以幫助你在你的努力。