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

16

http://jsfiddle.net/WVL9a/

以下を追加します。

CSS:

.clearer { clear: both; }

HTML:

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