Jquery 可调节的div大小_Jquery_Html_Css

Jquery 可调节的div大小

jquery html css

Jquery 可调节的div大小,jquery,html,css,Jquery,Html,Css,我有div，其中我有一张幻灯片，上面显示了应用了jquerycycle插件的图像。div如下所示 <body> <div id="general" style="margin: auto; text-align: center"> <div id="nav"></div> </div> <div id="wrap"> <div id="prev_ancho

我有

div

，其中我有一张幻灯片，上面显示了应用了

jquerycycle插件的图像。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>

我尝试了另一个属性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没有相应地增长
请帮我找出我代码中的错误。
高度：100%
在父级具有高度属性时不起作用，相反，使用minheight:125px
作为您的.slide
保持和img的高度，或者将它们保持在某个固定/可变值。。但是要确保两者都是相同的
如果你能为它们制作一把小提琴那就太好了。div
没有相应地增长是什么意思？@NikhilPatel在显示第6幅图像时，侧边没有足够的空间，所以第6幅图像低于5幅图像。这就是我想要的，但是第六张图片没有完全显示出来。它是半隐藏的，因为div
没有重新调整。在我这边看起来不错。检查。这可能是由于父级div
。你能给出完整的HTML吗？我听说我们可以使用display:box
或display:flex-box
。但是我不知道在这个场景中如何使用，也不知道在哪里使用。无论是minheight
还是height都不起作用。可能还有其他问题。
.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;
}