css - 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;
}​

編集

ソリューションを作成するためにコンテンツが同じ ままである限り、要素を変更できます.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：この質問は私を私の古い答えに関連付けます:)
Google画像のようなポップ画像
助けが必要な場合...私はここにいます

Answer 2

CSSに次の変更を加えるとうまくいくようです：

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

JS フィドルのデモ。

理由:

• display: block;a width(したがってmax-width) を要素に割り当てることができます。
• max-width: 90%;要素の最大幅が親の幅よりも小さいことを確認し、要素のコンテンツと親の境界線の間にいくらかのスペースを確保します。
• margin: 0 auto;親内で要素を水平方向に中央揃えにします。

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;
}

ただし、このソリューションはIE6では機能しないと思います。

Answer 4

div.post幅を 100% に設定し、幅を 100% に設定できます.post-info。

#Blog1 .post {
  width: 100%;
}

.post-info {
  width: 100%;
}

これにより、div.post-infoがその親divに対して相対的になると思います。

Answer 5

cssプロパティを試してくださいmax-width