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文本内容是什么，我的意思是div.upper的宽度<{>>最大 div.description的宽度。

修改

这有点困难：图像内容不是静态的，可以动态改变，因此宽度不是恒定的。

用CSS实现这一点是否可能？

Answer 1

http://jsfiddle.net/de6fr/1/ - 如何修复

的基本示例

你基本上使用popup作为容器，这意味着如果你想保留它的宽度，那就是你必须要做的事情。我使用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

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

Answer 3

您尚未定义固定元素的宽度，因此请为您的fiexed元素添加一些宽度

.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

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

修改

3 个答案: