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, in some cases (images of width than the div.post-info content)fits div. 但是,有时是干 d的主食。通过重新配置员额。如何使post后info子适合parent子的 w子,如果更多的话,则不会再 res。

my 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 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

Answer 1

这里是一句空话,但你应真正解释:,你希望高能变异?。

<js Fiddle demo

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

Answer 2

It seems to work with the following change to your CSS:

.post .post-info span{
    display: block;
    max-width: 90%;
    margin: 0 auto;
}

JS Fiddle demo。

Reasoning:

display: block; allows a width (and therefore max-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.

Answer 3

#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.

Answer 4

您可制定<条码>。

#Blog1 .post {
  width: 100%;
}

.post-info {
  width: 100%;
}

我认为,这将使其母体成为<代码>。

Answer 5

I had the same issue as the OP and the solution for me was to set

box-sizing: border-box;

我 could不敢在玩弄行为,但只是把上述行为补充到我所想的内在因素中,因此我希望能帮助某人。

Answer 6

处理这些不动产<代码> 最大程度

http://jsfiddle.net/ETkkR/

my css

Edit

友情链接