使用css停止div调整父div的大小

Question

http://jsfiddle.net/ETkkR/

<div id="Blog1">
    <div class="post">
    <img src="http://dummyimage.com/180x120/000/fff" alt="Image 1" title="This is my first image"/>
        <div class="post-info">
            <span>post title post title post title</span>
        </div>
    </div>
    <div class="post">
    <img src="http://dummyimage.com/175x104/f0f/fff" alt="Image 2" title="The second one is pretty"/>
                <div class="post-info">
            <span>post title post title post title</span>
        </div>
    </div>        
</div>?

在某些情况下(宽度大于div.post-info内容的图像)div.post-info符合div.post父级,但有时div.post-info的宽度更大,对父div有影响.通过调整大小来发布.如何使div.post-info适合div.parent的宽度,如果它更大则不调整大小.

我的css

#Blog1{
    padding:10px;
}
#Blog1 .post{
    border:1px solid #000000;
    margin:3px;
    text-align:center;
    position: relative;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.post img{
    height:100px;
}
.post .post-info{
    text-align:left;
}
.post .post-info span{
    word-wrap:break-word;
}?

编辑

您可以更改元素,因为内容 仍然无法创建解决方案人们不断提供不适合我所要求的解决方案...我需要的是对于孩子div .post-info不要更大宽度比.post父div的宽度

Answer 1

这是一个演示,但你应该解释一下:你想要高度可变吗？

jsFiddle演示

编辑的CSS(仅更改了元素):

#Blog1 .post{
    border:1px solid #000000;
    margin:3px;
    text-align:center;
    position: relative;
    display:block;         /**/
    float:left;            /**/
    overflow:hidden;       /**/
    padding-bottom:24px;   /**/
}
.post .post-info span{
    position:absolute;     /**/
    word-wrap:break-word;
} 

PS:这个问题让我联想到我的一个老答案:)
像谷歌图像的流行图像
如果你需要帮助......我在这里