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>
大粉红图像: