可調整的div尺寸

我有div其中我有一個應用於它的圖像幻燈片JQuery Cycle plugin。 div看起來像這樣可調整的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沒有相應增長。

請幫我找出我的代碼中的錯誤。

來源

2013-09-25 Freakyuser

這將是巨大的，如果你能爲同樣創造小提琴.. –

你這是什麼「div」的意思是不是相應增長？ –

@NikhilPatel在顯示第6張圖像時，側面沒有足夠的空間，所以第6張圖像低於5張圖像。這是我想要的，但第六張圖像沒有完全顯示。它隱藏了一半，因爲'div'不重新調整。 – Freakyuser

height:100%當父dosent有height attribuute不工作，而是使用min-height:125px您。既和img100%或

來源

2013-09-25 12:47:07

「最小高度」和「高度」都沒有問題。可能是其他一些問題。 – Freakyuser

保持高度保持他們一些固定/可變值..但要確保兩者相同

來源

2013-09-25 12:51:42 DarkHorse

可調整的div尺寸

回答

相關問題