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文件中，并将class #gallerybox设置为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%;
}

<强>更新：

Link

父DIV里面有很多DIV，CSS高度问题

2 个答案: