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>
大粉红图像:
原文地址:https://www.jb51.cc/html/231687.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。