使子 div 文本内容不扩展其父固定位置 div 的宽度

Question

我正在制作一个弹出窗口。它的结构很简单，如下：

<div class = "popup">
    <div class = "upper">
        <img src = "http://www.tapeta-mis-galazki-koala.na-pulpit.com/pokaz_obrazek.php?adres=mis-galazki-koala&rozdzielczosc=128x128" />
    </div>
    <div class = "description">This is a very interesting description of what you can see above.</div>
</div>

风格

.popup
{
    position: fixed;
    left: 50px; 
    top: 50px;
    border: 1px solid;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #000;
}
.popup .upper {
    min-width: 100px;
    min-height: 100px;
    border: 1px solid;
    padding: 5px;
    display: inline-block;
}
.popup .upper img {
    display: block;
}

这里有一个fiddle 应用了代码。

如您所见，div.popup 的位置与body 相同。

我想要实现的是使 div.description NOT 在包含大量文本时扩展其父 div.popup 宽度，而不是将文本包装成多行并且宽度为div.popup。 div.popup 宽度应由div.upper 宽度及其内容决定。换句话说，我的意思是让div.description 的宽度AT MOST 为div.upper 的宽度，无论其（div.description 文本内容）如何。

编辑

有个小难点：图片内容不是静态的，可能会动态变化，所以宽度不是恒定的。

这甚至可以通过 CSS 实现吗？

Answer 1

http://jsfiddle.net/de6fr/1/ - 如何修复的基本示例

---

您基本上将弹出窗口用作容器，这意味着如果您想保持其宽度，那就是您必须做的事情。我将max-width 属性与.popup 一起使用，如下所示：

.popup {
    position: fixed;
    left: 50px; 
    top: 50px;
    border: 1px solid;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #000;
    display: table;
    width: 1px;
}
.popup > div { 
    display: table-row;
}

.popup .upper {
    min-width: 100px;
    min-height: 100px;
    border: 1px solid;
    padding: 5px;
}
.popup .upper img {
    display: block;
}

---

更新 - 灵活

http://jsfiddle.net/de6fr/4/

使其灵活的解决方法是使用CSS hack，这基本上将元素的性质更改为table

CSS 的本质（层叠 样式表）意味着如果不涉及一些疯狂的想法，很难让父 DIV 获得子 div 的大小。但是，按照以下代码，没有什么可以阻止宽度非常小的“表格”：

.popup
{
    position: fixed;
    left: 50px; 
    top: 50px;
    border: 1px solid;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #000;
    display: table;
    width: 1px;
}
.popup .upper {
    min-width: 100px;
    min-height: 100px;
    border: 1px solid;
    padding: 5px;
    display: table-row;
}
.popup .upper img {
    display: block;
}
.popup .description {
    display: table-row;
}

Answer 2

你还没有定义固定元素的宽度，所以给你的固定元素添加一些宽度

.popup
{
    position: fixed;
    left: 50px; 
    top: 50px;
    border: 1px solid;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #000;
    width: 100%;
}

here is the demo

Answer 3

将 CSS 属性添加到您的弹出类并给它一个宽度

.popup
{
    position: fixed;
    left: 50px; 
    top: 50px;
    border: 1px solid;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #000;
    overflow:scroll;
    width:400px;
}