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.post通过调整大小。我如何使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的宽度更大

Answer 1

这是一个演示，但你应该解释一下：你想让高度变化吗？

<强> jsFiddle 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：这个问题让我联想到我的一个老答案:) Pop Images like Google Images
如果你需要帮助......我在这里

Answer 2

似乎可以对CSS进行以下更改：

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

JS Fiddle demo

推理：

display: block;允许将width（因此max-width）分配给该元素。
max-width: 90%;以确保元素的最大宽度小于父元素的宽度，从而在元素的内容和父元素的边框之间留出一些空间。
margin: 0 auto;将元素水平居中于其父级。

Answer 3

尝试使用css属性max-width

Answer 4

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

您可以将div .post宽度设置为100％，将.post-info宽度设置为100％：

#Blog1 .post {
  width: 100%;
}

.post-info {
  width: 100%;
}

我相信这会使div .post-info相对于其父div。

Answer 6

我遇到了与OP相同的问题，对我来说解决方案是设置

box-sizing: border-box;

我无法随意摆弄这个行为，但是仅将上述内容添加到内部元素中就可以在我的应用程序中解决它，因此希望对某人有所帮助。

使用css停止div调整父div的大小

http://jsfiddle.net/ETkkR/

我的css

修改

6 个答案: