首页 > 代码库 > css 实现 左右div 等高, 同时父级div就是最高的子div的高度.
css 实现 左右div 等高, 同时父级div就是最高的子div的高度.
方法一: 通过父级overflow:hidden, 自己设置padding-bottom 和 margin-bottom来实现.
1 #wrap{ 2 overflow:hidden; 3 width:1000px; 4 margin:0 auto; 5 } 6 #left,#center{ 7 margin-bottom:-10000px; 8 padding-bottom:10000px; 9 } 10 #left{ 11 float:left; 12 width:250px; 13 background:#00FFFF; 14 } 15 #center{ 16 float:left; 17 width:500px; 18 background:#FF0000; 19 }
参考链接: 纯css实现div左右等高
方法二: 使用 table-cell
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .left, 8 .right { 9 padding: 10px; 10 display: table-cell; 11 border: 1px solid #f40; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="wrap"> 17 <div class="left"> 18 left div 19 <br/> 20 <br/> 21 <br/> 22 <br/> 23 <br/> 24 </div> 25 <div class="right">right div</div> 26 </div> 27 </body> 28 </html>
参考链接: 纯css实现div左右等高
方法三:使用css3盒模型
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .wrap { 8 display: -webkit-box; 9 } 10 .left, 11 .right { 12 padding: 10px; 13 border: 1px solid #f40; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="wrap"> 19 <div class="left"> 20 left div 21 <br/> 22 <br/> 23 <br/> 24 <br/> 25 <br/> 26 </div> 27 <div class="right">right div</div> 28 </div> 29 </body> 30 </html>
参考链接: 纯css实现div左右等高
css 实现 左右div 等高, 同时父级div就是最高的子div的高度.
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。