40

我有一个<div>里面有一些<img>。每个<img>都在它自己的内部<div>。问题是即使我将它的高度设置为自动，外部 div 也不会自动获取内容的高度。为了显示内联的内部 div，我将它们设置为float: left. 但是，如果我删除浮动，外部 div 会正常运行并占用内容的高度。但我需要 imgs 是内联的。谁能帮我？

JSFiddle

HTML：

<div id="gallery">
    <div class="gal-foto">
        <img src="http://farm3.staticflickr.com/2819/10183644713_c1f49eb81f_b.jpg" class="gal-img">
    </div>
    <div class="gal-foto">
        <img src="http://farm4.staticflickr.com/3694/10183642403_0c26d59769_b.jpg" class="gal-img">
    </div>
    <div class="gal-foto">
        <img src="http://farm4.staticflickr.com/3764/10183532675_0ce4a0e877_b.jpg" class="gal-img">
    </div>
    <div class="gal-foto">
        <img src="http://farm6.staticflickr.com/5331/10183598286_9ab37e273c_b.jpg" class="gal-img">
    </div>
    <div class="gal-foto">
        <img src="http://farm6.staticflickr.com/5334/10183535585_04b18fa7da_b.jpg" class="gal-img">
    </div>
</div>

CSS：

#gallery {
    border: 1px solid;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
    height: auto;
    margin-top: 20px;
    padding: 15px;
}
.gal-foto {
    float: left;
    margin: 3px;
    position: relative;
}
.gal-img {
    display: block;
    max-height: 150px;
    max-width: 150px;
}
4

7 回答 7

72

在此处查看演示。只需添加overflow: auto;到您的主容器中。

#gallery {
    border: 1px solid;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
    height: auto;
    margin-top: 20px;
    padding: 15px;
    overflow: auto;
}
于 2013-10-14T06:53:10.420 回答
16

http://jsfiddle.net/WVL9a/

添加以下内容：

CSS：

.clearer { clear: both; }

HTML：

<div id="gallery">
    ....
    <div class="clearer"></div>
</div>
于 2013-10-14T06:59:27.297 回答
5

将 clearfix 类添加到您的主容器：

.clearfix:before,
.clearfix:after {
   content: '\0020';
   display: block;
   overflow: hidden;
   visibility: hidden;
   width: 0;
   height: 0;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

在你的主容器中调用它：

<div class="clearfix" id="gallery">
...
</div>
于 2013-10-14T06:54:49.673 回答
2

只需添加overflow: auto;如下：

 #gallery {
        border: 1px solid;
        border-radius: 10px 10px 10px 10px;
        box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
        height: auto;
        margin-top: 20px;
        padding: 15px;
        overflow: auto;
    }
于 2013-10-14T06:54:37.723 回答
1

#gallery像这样只写overflow:hidden;

演示

css

#gallery {
    border: 1px solid;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
    height: auto;
    margin-top: 20px;
    padding: 15px;
    overflow:hidden;
}
于 2013-10-14T06:53:26.350 回答
1

将此添加到您的 css 文件中：

.clear{
clear:both;
}

现在，在关闭 each 之前div，添加以下语句： <div class="clear"></div>

于 2013-10-14T06:54:17.860 回答
1

一种方法：设置.gal-foto为display: inline-block

或者你可以清除修复#gallery，添加这些

#gallery:after{
   content: " ";
   display: table;
   clear: both;
}
于 2013-10-14T06:56:28.610 回答