html – 使用div设置图像,其子设置高度

div本身就是它内容的高度.

我希望div包含两个子节点：另一个div(或左对齐的图像)和无序列表(ul).内部div(或图像)将匹配父div的高度,父div高度将符合列表的高度(可包含任何合理数量的项目).

我不确定如何设置父div的高度以匹配列表的高度,并使内部div与外部div的高度匹配.通过CSS正确完成.

很高兴接受替代解决方案,这只是我尝试解决设计目标的一种方式.

解决方法

Live Demo

>经过IE7 / IE8和最新版本的测试：Firefox,Chrome,Safari,Opera.
>图像的高度完全取决于ul的高度.
>为IE7提供所需的额外规则高度：100％,我使用的是Star hack.如果您需要100％有效的CSS,可以使用conditional comments或Star plus hack.

CSS：

#iContainer {
    background: #ccc;
    overflow: hidden;
    position: relative
}
#iContainer div {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    *height: 100% /* just for you,IE7 */
}
#iContainer img {
    height: 100%
}
#iContainer ul {
    float: right
}

HTML：

<div id="iContainer">

    <div><img src="https://dummyimage.com/500x700/f0f/fff" /></div>

    <ul>
        <li>list 1</li>
        <li>list 2</li>
        <li>list 3</li>
        <li>list 4</li>
        <li>list 5</li>
        <li>list 6</li>
        <li>list 7</li>
        <li>list 8</li>
    </ul>

</div>

大粉红图像：