可调节的div尺寸

时间:2013-09-25 12:41:00

标签: jquery html css

我有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并没有相应增长。

请帮我查一下我代码中的错误。

2 个答案:

答案 0 :(得分:0)

当父级没有height:100%属性时,

height不起作用,而是min-height:125px使用.slide

答案 1 :(得分:0)

保持.slideimg 100%的高度或将它们保持为固定/变量值..但要确保两者相同