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的宽度更大
解决方法
这是一个演示,但你应该解释一下：你想要高度可变吗？
编辑的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;
}
P.S：这个问题让我联想到我的一个老答案:)
Pop Images like Google Images如果你需要帮助……我在这里
