头闻号

上海巨化纺织化工科技研究所(普通合伙)

其他纺织染整助剂|抗菌、防臭剂|整理剂|织物阻燃剂|纺织印染用粘合剂|孕妇装

首页 > 新闻中心 > 科技常识:div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题
科技常识:div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题
发布时间:2023-02-01 10:27:11        浏览次数:3        返回列表

今天小编跟大家讲解下有关div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题 的相关资料,希望小伙伴们看了有所帮助。

复制代码代码如下: <body bgcolor="#0B3D82"> div ul li 嵌套后解决高度自适应办法: html代码如下 复制代码代码如下: <div class="main_div"> <ul> <li><a href=""><img src="https://www.aidi.net.cn//css/images/img.gif"width="80"height="90"/><span class="front12_arial">daugli-1webServer-1web Server</span></a></li> <div style="clear:both;"></div> <ul> <div class="main_div"> CSS代码如下 复制代码代码如下:.main_div { width:80%; margin-top: 15px; margin-right: 26px; margin-bottom: 15px; margin-left: 26px; } .main_div ul { min-height:205px; height:auto; } .main_div li { float:left; text-align:center; height:170px; width:130px; border:1px solid #CCC; margin-right:10px; margin-bottom:15px; padding:10px; } 目的:增加多个li后,DIV高度自动适应。 思路:定义li高度为绝对值 205px,定义ul高度为自动 {min-height:205px; height:auto;} main_div 高度为 空 注意: 1. min-height:205px; height:auto; 意思为最小高度为205,超过以后自适应 2. 增加<div style="clear:both;"></div> 清除换行 3. 本例在IE6下和Chrome下测试正常

来源:爱蒂网