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

【问题标题】：stop div resizing parent div using css停止 div 使用 css 调整父 div 的大小
【发布时间】：2012-05-28 08:21:47
【问题描述】：

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 父级，但有时 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 的宽度

【问题讨论】：

只是一个问题：您不想增加高度，但要实现元素具有overflow:hidden; 对吗？您应该告诉我们您想要实现什么，不想要什么。

标签： css resize

【解决方案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
如果你需要帮助......我在这里

【讨论】：

我知道我在两天前发现了它，我亲自对插件进行了一些编辑，非常棒，但我需要禁用 javascript 的用户的后备。
:) 谢谢！看到你的小提琴我很惊讶！ :) 好的，现在告诉我你对我的演示和我的回答的看法——还有我的问题——因为我担心如果你试图扩大容器的高度，那么全部结果可能会有点混乱（因为它取决于描述长度。）
我想出了一个替代解决方案，一旦我完成了造型，我会与你分享
你的回答是帮助我想出解决方案的原因，所以我接受了;)
让我们continue this discussion in chat

【解决方案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; 在其父元素中水平居中。

【讨论】：

图片之间可能会有很多空白。不好。它们都必须在任何地方都是一种尺寸

【解决方案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 中不起作用。

【讨论】：

【解决方案4】：

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

#Blog1 .post {
  width: 100%;
}

.post-info {
  width: 100%;
}

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

【讨论】：

【解决方案5】：

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

box-sizing: border-box;

我无法在小提琴中重现该行为，但只需将上述内容添加到内部元素即可在我的应用程序中解决它，所以我希望对某人有所帮助。

【讨论】：

【解决方案6】：

试试css属性max-width

【讨论】：

我知道，但是如果我设置一个 max-width 属性，文本的宽度将不会与父 div 中的内容相同（如果它更大）