父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