停止使用CSS的大小调整父div [英] stop div resizing parent div using css
问题描述
<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.post有影响。如何使div.post-info适合div.parent的宽度,如果大于则不调整大小。
The div.post-info in some cases(images of width greater than the div.post-info content) fits the div.post parent however sometimes the width of the div.post-info is greater having an affect on the parent div.post by resizing it. how can i make the div.post-info fit the width of the div.parent and not resizing it if it is greater.
#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
Edit
YOU CAN CHANGE THE ELEMENTS AS LONG AS THE CONTENT REMAINS SAME TO CREATE A SOLUTION people keep giving solutions which are not suitable for what i'm asking...what i need is for the child div .post-info to not be a greater width than that of the .post parent div
推荐答案
这里是一个演示,但您应该真正地解释:您希望高度变化吗?
Here is a demo, but you should really explain: do you want the height to be variable ?
jsFiddle demo
编辑的CSS(仅更改元素):
edited CSS (only changed elements):
#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:这个问题使我与我的老答案相关联) >
类似Google图片的弹出图片
如果你需要帮助...我在这里
P.S: this question associates me to an old answer of mine :)
Pop Images like Google Images
If you need help ... I'm here
这篇关于停止使用CSS的大小调整父div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!