我有一个 div，其中我有一个图像幻灯片，其中应用了 JQuery Cycle 插件。 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 没有相应增长。
请帮我找出代码中的错误。
最佳答案
保持 .slide 和 img 100% 的高度，或者将它们保持在某个固定/可变值..但要确保两者都是一样
关于jquery - 可调整的 div 大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19005208/