父DIV，CSS高度問題中的許多DIV

Question

我正在放置一個動態照片庫並試圖放置縮略圖。基本上我試圖把每個縮略圖和標題放在它自己的DIV中，向左移動。縮略圖正如我想要的那樣工作，但由於某些原因，父DIV拒絕覆蓋縮略圖區域的高度。這裏是我正在使用的CSS ..

#galleryBox { 
    width: 650px; 
    background: #fff; 
    margin: auto; 
    padding: 5px; 
    text-align: center; 
} 
.item { 
    display: block; 
    margin: 10px; 
    padding: 10px; 
    float: left; 
    background: #353535; 
    min-width: 120px; 
    } 
.label { 
    display: block; 
    color: #fff; 
} 

我試過身高：汽車，並沒有做任何事情。這是我想要的樣式：

<div id="galleryBox" class="ui-corner-all"> 
       <div class="item ui-corner-all"> 
        <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> 
        <p><span class="label">Testing</span></p> 
       </div> 
       <div class="item ui-corner-all"> 
        <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> 
        <p><span class="label">Testing</span></p> 
       </div> 
       <div class="item ui-corner-all"> 
        <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> 
        <p><span class="label">Testing</span></p> 
       </div> 
       <div class="item ui-corner-all"> 
        <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> 
        <p><span class="label">Testing</span></p> 
       </div> 
       <div class="item ui-corner-all"> 
        <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> 
        <p><span class="label">Testing</span></p> 
       </div> 
       <div class="item ui-corner-all"> 
        <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> 
        <p><span class="label">Testing</span></p> 
       </div> 
       <div class="item ui-corner-all"> 
        <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> 
        <p><span class="label">Testing</span></p> 
       </div> 
      </div> 

謝謝！

Answer 1

給你包裝div overflow: auto;所以它包含了浮動孩子正確，就像這樣：

#galleryBox { 
    overflow: auto; /* Only addition to your current styles */ 
    width: 650px; 
    background: #fff; 
    margin: auto; 
    padding: 5px; 
    text-align: center; 
} 

這不需要HTML的變化，只是風格上應該做的。

Answer 2

你需要一個clearfix

下面的代碼添加到你的CSS文件，並設置的#gallerybox的class到clearfix

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
} 

UPDATE：

Link