三个等高列
如何实现呢？
方式1
这三列是并排排列 且视觉上看 三列是一样高(不论里面文字多少 视觉上看都是一样)
听起来是悖论 从结构看p元素内容的多少直接决定了box元素的长短 怎么可能一样高？
那就先让每个元素都比较高(加入很长的padding) 然后再某个位置一起截断 这样DIV看起来就一样高
<!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>Untitled Document</title> <style type="text/css"> .wrapper{ position: relative; overflow: hidden; } .box{ width: 20em; float: left; display: inline; padding: 20px; padding-bottom: 520px; /*使得本块的背景色可以延伸很长 为什么要这么做?*/ /* 这三列是并排排列 且视觉上看 三列是一样高(不论里面文字多少 视觉上看都是一样) 听起来是悖论 从结构看p元素内容的多少直接决定了box元素的长短 怎么可能一样高？ 那就先让每个元素都比较高 然后再某个位置一起截断 这样DIV看起来就一样高*/ margin-left: 20px; margin-bottom: -500px;/*截断用 让bottom这个元素顶上来*/ background-color: #ffe8aa; border-radius: 1em; border: 3px solid #ff5a22; } .bottom{ position: absolute; margin-left: -20px; margin-left: -23px;/*因为加入了border 所以偏移程度应该更大些*/ bottom: 0px;/*注意 bottom是位于wrapper底部的 所以这个定位是相对于wrapper底部距离为0*/ width: 360px; height: 20px; background-color: white; border: 3px solid white; /*因为我这里是一个圆角的样式 我先用一个块遮住非圆角的部分*/ border-top: none; border-top-width: 0; /*两者任选一个都有效果*/ } .bottom-radius{ margin-left: -3px; margin-right: -3px; height: 20px; background-color: #ffe8aa; border: 3px solid #ff5a22; border-top: 0; border-bottom-right-radius: 1em; border-bottom-left-radius: 1em; } </style> </head> <body> <div class='wrapper'> <div class='box'> <h2>dcdd</h2> <p>【校园招聘】2014年腾讯校园招聘 - 黑龙江中公教育网 - 公务员 hlj.offcn.com › 事业单位 › 招考信息Translate this page Sep 7, 2013 - 导语：黑龙江中公教育为广大应届毕业生提供最新的校园招聘信息，详情 ... 腾讯公司成立于1998年11月，是目前中国最大的互联网综合服务提供商之 ...</p> <div class='bottom'> <div class='bottom-radius'></div> </div> </div> <div class='box'> <h2>dcdd</h2> <p>腾讯校园招聘- 热门问答- 知乎 www.zhihu.com/topic/19647735Translate this page 腾讯实习生招聘笔试成绩对最终的录.</p> <div class='bottom'> <div class='bottom-radius'></div> </div> </div> <div class='box'> <h2>dcdd</h2> <p>腾讯2014校园招聘_校园招聘_2014校园招聘 - 2014暑期实习 www.htntw.com/?detail/2633.htmlTranslate this page Feb 24, 2014 - 腾讯校园招聘信息概况. 校园招聘单位：腾讯. 校招岗位城市：全国. 校园招聘部门：腾讯. 校园招聘岗位：软件开发、安全技术、软件测试、技术运营、类 ... 腾讯校园招聘- 热门问答- 知乎 www.zhihu.com/topic/19647735Translate this page 腾讯实习生招聘笔试成绩对最终的录用有多大影响？ 腾讯校招技术类岗位面试流程是怎样的？ B 线技术类本科生参加腾讯的校园招聘，简历会被无视么？ 12.腾讯2014校园招聘_校园招聘_2014校园招聘 - 2014暑期实习 www.htntw.com/?detail/2633.htmlTranslate this page Feb 24, 2014 - 腾讯校园招聘信息概况. 校园招聘单位：腾讯. 校招岗位城市：全国. 校园招聘部门：腾讯. 校园招聘岗位：软件开发、安全技术、软件测试、技术运营、类 ... 腾讯校园招聘- 热门问答- 知乎 www.zhihu.com/topic/19647735Translate this page 腾讯实习生招聘笔试成绩对最终的录用有多大影响？ 腾讯校招技术类岗位面试流程是怎样的？ B 线技术类本科生参加腾讯的校园招聘，简历会被无视么？ 12.</p> <div class='bottom'> <div class='bottom-radius'></div> </div> </div> </div> </body> </html>