一行两列的自适应高度
时间：2011-03-24
来源：互联网
先看代码,想让div1的高度自适应div2的高度,其中所有DIV的高度都是未知的.搞了老半天没一点头绪,各位大大帮忙啦.
[ 本帖最后由 dreamtiny 于 2011-3-24 11:48 编辑 ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>关于浮动自适应问题</title> </head> <body> <div style="background-color:#0FF; width:330px; overflow:hidden;"> <div class="left" style="float:left; width:30px; background-color:red;overflow:hidden;">div1</div> <div class="center" style="float:left; background:#0F0; width:300px;"> <p>div2</p> <p>怎么才能让div1和高度自适应div2的高度?</p> <p> </p> <p> </p> <p> </p> </div> <br clear="all" /> </div> </body> </html>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
1.gif (4.85 KB)[ 本帖最后由 dreamtiny 于 2011-3-24 11:48 编辑 ]
作者: dreamtiny 发布时间: 2011-03-24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>关于浮动自适应问题</title> </head> <body><div style="width:330px; background-color:red;overflow:hidden;"><div style="width:30px;float:left;">d1</div><div class="center" style="float:right; background:#0F0; width:300px;"> <p>div2</p> <p>怎么才能让div1和高度自适应div2的高度?</p> <p> </p> <p> </p> <p> </p> </div></div> </body> </html>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
作者: xiaotian_s 发布时间: 2011-03-24
引用:
原帖由 xiaotian_s 于 2011-3-24 12:00 发表
关于浮动自适应问题 d1 div2 怎么才能让div1和高度自适应div2的高度?      
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
作者: dreamtiny 发布时间: 2011-03-24
方案一
做一个背景，Y轴平铺
方案四
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .box_a{ width:100px; padding-right:100px; background:#09F; } .box_b{ float:right; width:100px; margin-right:-100px; background:#999; } .clear{ clear:right; } </style> </head> <body> <div class="box_a"> 第一个div <div class="box_b"> 第二个div<br /> 第二个div<br /> 第二个div<br /> 第二个div<br /> 第二个div<br /> 第二个div<br /> </div> <div class="clear"></div> </div> </body> </html>
提示：您可以先修改部分代码再运行
方案二提示：您可以先修改部分代码再运行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .box{ overflow:hidden; } .box_a{ float:left; width:100px; background:#09F; padding-bottom::32767px; margin-bottom:-32767px; overflow:hidden; } .box_b{ float:left; width:100px; background:#999; padding-bottom:32767px; margin-bottom:-32767px; overflow:hidden; } </style> </head> <body> <div class="box"> <div class="box_a"> 第一个div </div> <div class="box_b"> 第二个div<br /> 第二个div<br /> 第二个div<br /> 第二个div<br /> 第二个div<br /> 第二个div<br /> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行
方案三提示：您可以先修改部分代码再运行
做一个背景，Y轴平铺
方案四
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .box{ width:200px; position:relative; } .box_a{ position:absolute; left:0; top:0; width:100px; background:#09F; height:100%; } .box_b{ margin-left:100px; width:100px; background:#999; } </style> </head> <body> <div class="box"> <div class="box_a"> 第一个div </div> <div class="box_b"> 第二个div<br /> 第二个div<br /> 第二个div<br /> 第二个div<br /> 第二个div<br /> 第二个div<br /> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行
[ 本帖最后由 kllb520 于 2011-3-24 14:07 编辑 ] 提示：您可以先修改部分代码再运行
作者: kllb520 发布时间: 2011-03-24
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
