我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 没有相应地增长。
请帮我找出我的代码中的错误。