我有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并没有相应增长。
请帮我查一下我代码中的错误。
答案 0 :(得分:0)
height:100%
属性时, height
不起作用,而是min-height:125px
使用.slide
。
答案 1 :(得分:0)
保持.slide
和img
100%
的高度或将它们保持为固定/变量值..但要确保两者相同