停止使用 css 调整父 div 大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10691941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
stop div resizing parent div using css
提问by Yusaf Khaliq
http://jsfiddle.net/ETkkR/
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>?
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.
div.post-info 在某些情况下（宽度大于 div.post-info 内容的图像）适合 div.post 父级，但有时 div.post-info 的宽度更大，对父级 div 有影响。通过调整大小发布。我怎样才能使 div.post-info 适合 div.parent 的宽度，并且如果它更大则不调整它的大小。
my css
我的 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;
}?
Edit
编辑
YOU CAN CHANGE THE ELEMENTS AS LONG AS THE CONTENT REMAINS SAME TO CREATE A SOLUTIONpeople 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
只要内容保持不变，您就可以更改元素以创建解决方案人们不断提供不适合我所要求的解决方案...我需要的是让孩子的 div .post-info 不是更大宽度比 .post 父 div 的宽度
回答by Roko C. Buljan
Here is a demo, but you should really explain: do you want the height to be variable ?
这是一个演示，但您应该真正解释一下：您希望高度可变吗？
edited CSS (only changed elements):
编辑的 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: this question associates me to an old answer of mine :)
Pop Images like Google Images
If you need help ... I'm here
PS：这个问题将我与我的一个旧答案联系起来:)
像谷歌图片这样的流行图片
如果你需要帮助......我在这里
回答by David says reinstate Monica
It seems to work with the following change to your CSS:
它似乎适用于您的 CSS 的以下更改：
.post .post-info span{
display: block;
max-width: 90%;
margin: 0 auto;
}?
Reasoning:
推理：
display: block;allows awidth(and thereforemax-width) to be assigned to the element.max-width: 90%;to ensure that the element's maximum width is less than the width of the parent, allowing some space between the content of the element and the borders of the parent.margin: 0 auto;horizontally centres the element within its parent.
display: block;允许将 awidth（因此max-width）分配给元素。max-width: 90%;确保元素的最大宽度小于父元素的宽度，在元素的内容和父元素的边框之间留出一些空间。margin: 0 auto;将元素水平居中在其父元素中。
回答by soberga
You could set the div .postwidth to 100%, and .post-infowidth to 100%:
您可以将 div.post宽度设置为 100%，将.post-info宽度设置为 100%：
#Blog1 .post {
width: 100%;
}
.post-info {
width: 100%;
}
I believe this will make the div .post-inforelative to its parent div.
我相信这将使 div.post-info相对于其父 div。
回答by Steve Binder
Try the css property max-width
试试css属性 max-width
回答by Rob Lowe
#Blog1 .post{
border:1px solid #000000;
margin:3px;
text-align:center;
position: relative;
display: inline-block;
*display: inline;
zoom: 1;
max-width: 200px;
overflow-x: hidden;
}
This solution will not however work in IE6 I think.
但是，我认为此解决方案不适用于 IE6。
回答by user2728841
I had the same issue as the OP and the solution for me was to set
我和 OP 有同样的问题，我的解决方案是设置
box-sizing: border-box;
I couldn't repro the behaviour in a fiddle, but just adding the above to the inner element resolved it in my app, so I hope that helps someone.
我无法在小提琴中重现该行为，但只需将上述内容添加到内部元素即可在我的应用程序中解决它，所以我希望对某人有所帮助。
