私はそれに適用されたdiv画像のスライドショーを持っています。見た目はこんなJQuery Cycle plugin感じdiv
<body>
<div id="general" style="margin: auto; text-align: center">
<div id="nav"></div>
</div>
<div id="wrap">
<div id="prev_anchor">
<a id="prev" href="#"><img class="arrows" src="images/left_arrow.png" /></a>
</div>
<div class="slideshow">
<div class="slide">
<img src="images/bridge.jpg" /> <img src="images/club.jpg" /> <img
src="images/extreme.jpg" /> <img src="images/haygroup.jpg" /> <img
src="images/media_pro.jpg" /> <img src="images/thumbnail.jpg" />
</div>
<div class="slide">
<img src="images/resizer.jpg" /> <img src="images/thumbnail.jpg" />
<img src="images/writingmanisfesto.jpg" /> <img
src="images/reactor.jpg" /> <img src="images/resizer.jpg" />
</div>
<div class="slide">
<img src="images/bridge.jpg" /> <img src="images/club.jpg" /> <img
src="images/writingmanisfesto.jpg" /> <img
src="images/reactor.jpg" /> <img src="images/media_pro.jpg" />
</div>
</div>
<div id="next_anchor">
<a id="next" href="#"><img class="arrows" src="images/right_arrow.png" /></a>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p> </body>
画像の最初のセットには、6 つの画像があります。次のセットでは、5 つまたはそれ以下しかありません。
画像サイズは常に同じです。上記のコードの Css は次のとおりです。
.slideshow {
margin: 20px auto;
padding: 0;
float: left;
width: 91%;
margin-left:auto;
margin-right:auto;
}
.slide {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
img {
padding: 5px;
border: 1px solid #ccc;
background-color: #eee;
margin: 0;
width: 125px;
height: 125px;
}
さて、私は他のプロパティを試しましたflex（以下はコードです）が、それでも無駄です。
.slideshow {
margin: 20px auto;
padding: 0;
order: 2;
flex: 94%;
/* float: left;
width: 803px;
height: 100%;
margin-left:auto;
margin-right:auto; */
}
.slide {
margin: 0;
padding: 0;
/* height: 158px; */
}
.slideshow img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
margin: 0
}
#prev_anchor {
order: 1;
}
#next_anchor {
order: 3
}
#prev_anchor, #next_anchor {
/* float: left; */
flex: 3%;
}
#wrap {
display: flex;
width: 67.6%;
/* overflow: hidden; */
}
p {
clear: both;
}
設定した5枚の画像を表示している間は問題ありません。
しかし、6 つの画像を表示すると問題が発生します。6 番目の画像が 5 画像を下回ることを望みますが、これは正確に発生していますが、それに応じて div が成長していません。
私のコードの間違いを見つけるのを手伝ってください。