div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题
发布时间：2013-10-20 09:56:46 作者：佚名 
我要评论
我要评论div ul li 嵌套的使用在网页布局中很常见，最主要的问题就是如何解决增加多个li后DIV高度自动适应问题，本文有个不错的示例，可以解决此问题，大家可以尝试运行下
复制代码
代码如下:<body bgcolor="#0B3D82">
div ul li 嵌套后解决高度自适应办法:
html代码如下
复制代码
代码如下:<div class="main_div">
<ul>
<li><a href="#"><img src="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下测试正常
相关文章
本文介绍了div 图片如何在DIV内水平居中，无论文字居中、图片居中等内容居中我们都可以使用以上两种方法实现，一般推荐使用CSS进行，但网页多时候，我们只需要修改CSS文件2021-11-30
DIV半透明实现，使用CSS实现DIV成半透明效果，CSS实现层与背景半透明效果。本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2021-11-30
新手在使用web标准（div css）开发网页的时候，遇到第一个问题是div与span有什么区别，什么时候用div，什么时候用span标签。下面小编就通过本文给大家讲解下，感兴趣的朋友2021-11-30
这篇文章主要介绍了设置div背景透明的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2021-02-20
这篇文章主要介绍了CSS实现div不设高度完全居中，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2021-02-04
这篇文章主要介绍了div自适应高度自动填充剩余高度,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2020-07-08- 这篇文章主要介绍了DIV+CSS的命名规矩才能有利于SEO优化的实现方法,需要的朋友可以参考下2018-11-15
- 这篇文章主要介绍了DIV或者DIV里面的图片水平与垂直居中的方法,需要的朋友可以参考下2018-11-15
这篇文章主要介绍了详解如何用div实现自制滚动条,滚动条是浏览器中最常见的组件了。想要学习如何自制滚动条的方法，需要了解的朋友可以参考下2018-03-21- Div布局是学习的重点，这篇文章主要为大家详细介绍了div对齐与网页布局的相关学习资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-31
最新评论