Question

我有<div>，其中有一些<img>。每个<img>都在其自己的<div>内。问题是外部div不会自动获取内容的高度，即使我将其高度设置为auto。同样要显示内部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;
}

Answer 1

See the Demo here 。只需将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;
}

Answer 2

http://jsfiddle.net/WVL9a/

添加以下内容：

CSS：

.clearer { clear: both; }

HTML：

<div id="gallery">
    ....
    <div class="clearer"></div>
</div>

Answer 3

将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>

Answer 4

这样只需在#gallery

中写下overflow:hidden;即可

<强> demo

<强> 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;
}

Answer 5

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

.clear{
clear:both;
}

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

Answer 6

只需添加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;
    }

Answer 7

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

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

#gallery:after{
   content: " ";
   display: table;
   clear: both;
}

Div即使有内容也没有高度

7 个答案: