0

我正在开发一种弹出窗口。它的结构非常简单，如下：

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

这是应用代码的小提琴。

如您所见，div.popup被定位为固定在body.

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

编辑

有一个小困难：图像内容不是静态的，可能会动态变化，因此宽度不是恒定的。

这甚至可以用 CSS 实现吗？

4

3 回答 3

3

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;
}
于 2013-10-25T08:31:18.433 回答
0

将 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;
}
于 2013-10-25T08:30:35.823 回答
0

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

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

这是演示

于 2013-10-25T08:30:58.110 回答