Question

我有一个非常特别的CSS设置：我有一个100％宽的大盒子，由固定的宽度和宽度组成。左侧的高度图像和文本容器（填充框的其余部分）由两列组成（文本容器的50％宽度）。这两列具有动态生成的内容，因此具有不同的高度。我想让我的大盒子成为它所包含的所有内容的高度。

这是我想要的一个例子，以及我目前所拥有的JSFiddle（.outerdiv没有定义的高度，因此所有内容都已折叠）。

 ____________________________________________________________________________________
| _________  __________________________________  ___________________________________ |
||  IMAGE  ||           column 1               ||             column 2              ||
||  fixed  ||50% of entire width minus img     ||                                   ||
||  width  ||width, height depends on content  ||  50% of entire width minus img    ||
||         ||__________________________________|| width, height depends on content  ||
||_________|                                    |  This part of the column is still ||
|                                               |  included in the big outer div    ||
|                                               |___________________________________||
|____________________________________________________________________________________|

我很乐意为此提供帮助。如果您需要我澄清问题，请告诉我。

Answer 1

我放弃绝对定位并使用它：

＆＃13;

.outerdiv {
    width: 90%;
    margin: 0 auto;
    background:yellow;
    border: 1px solid black;
    display:inline-block;
    position: relative;
}
.img-box {
    height:200px;
    width:150px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}
.img-box img {
    height:200px;
    width:150px;
    margin: auto;
    vertical-align:middle;
}
.text-container {
    margin-left:160px;
}
.left-div, .right-div {
    width: 50%;
    float: left;
    overflow:hidden;
}

＆＃13;

<div class="outerdiv">
    <div class="img-box">
        <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample1_l.jpg">
    </div>
    <div class="text-container">
        <div class="left-div">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div class="right-div">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>

＆＃13;

如何使外部div扩展到其动态生成的所有内容的高度？

1 个答案: