div ul li 嵌套后解决高度自适应方法

悠悠 2022-09-17 12:22 202阅读 0赞

方法一：

div 自适应宽度  
很简单 ，你应该设置div的display:inline-block  
然后不要设置宽度就行了

方法二：

<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下测试正常

发表评论取消回复

表情：

评论列表（有 0 条评论，202人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue div高度自适应

1.动态style绑定 <div :style="styObj"></div> 2.data定义 data(){ return{ s

浅浅的花香味﹌/ 2022年12月07日 01:25/ 0 赞/ 209 阅读

相关 div ul li 嵌套后解决高度自适应方法

方法一： div 自适应宽度很简单，你应该设置div的display:inline-block 然后不要设置宽度就行了方法二：

悠悠/ 2022年09月17日 12:22/ 0 赞/ 203 阅读

相关 CSS: 解决Div float后，父Div无法高度自适应的问题

在用CSS+DIV的布局中，经常会发现，当一个DIV float之后，如果他的高度超过了其父DIV的高度时，其父DIV的高度并不会相应的进行调整。要解决这个问题（也叫做闭合(清

柔情只为你懂/ 2022年08月27日 02:26/ 0 赞/ 182 阅读

相关 DIV嵌套过程中的高度自适应问题

对于很多网站制作的新手朋友来说，学习DIV+CSS是必不可少的。站长在一些上海网站制作论坛以及QQ群里面，还有百度问答里面，看到很多朋友在问嵌套DIV的很多问题，比如嵌套DIV

向右看齐/ 2022年07月13日 01:40/ 0 赞/ 332 阅读

相关转：解决Div自适应高度的方法

原文地址：http://www.yutheme.cn/website/index.php/content/view/39/63.html 原文中的方法3好用:) 原文如下：

曾经终败给现在/ 2022年07月12日 15:53/ 0 赞/ 232 阅读

相关 div模拟实现textarea（高度自适应）

div模拟实现textarea（高度自适应）简单贴出实现 CSS代码： .text_box { width: 400px;

- 日理万妓/ 2022年06月13日 13:57/ 0 赞/ 285 阅读

相关 div 自适应高度自动填充剩余高度

概述：记录一下，别人已经写得比较好了，下次方便检索地址：[http://www.cnblogs.com/pangguoming/p/5695184.html][htt

深藏阁楼爱情的钟/ 2022年05月18日 04:53/ 0 赞/ 266 阅读

相关 HTML-视频高度自适应解决方法

使用开源video.js 项目地址：[https://github.com/videojs/video.js][https_github.com_videojs_video

墨蓝/ 2022年05月17日 12:25/ 0 赞/ 819 阅读

相关 div高度根据内容物高度自适应的方法

示例： HTML中： <div class="lei"> <p>电脑</p> <ul> <li><b>台式

古城微笑少年丶/ 2022年01月31日 10:29/ 0 赞/ 477 阅读

相关 div嵌套ul时div的宽度和高度自适应

div中嵌套ul时div的宽度和高度随着ul里元素的变化而变化，下面是一个事例，可以改变li元素的内容和个数去验证： <!DOCTYPE html PUBLIC "-//W3

比眉伴天荒/ 2021年06月24日 14:36/ 0 赞/ 609 阅读