三个等高列

三个等高列

如何实现呢？

方式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/19647735‎Translate 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.html‎Translate this page
Feb 24, 2014 - 腾讯校园招聘信息概况. 校园招聘单位：腾讯. 校招岗位城市：全国. 校园招聘部门：腾讯. 校园招聘岗位：软件开发、安全技术、软件测试、技术运营、类 ...
腾讯校园招聘- 热门问答- 知乎
www.zhihu.com/topic/19647735‎Translate this page
腾讯实习生招聘笔试成绩对最终的录用有多大影响？ 腾讯校招技术类岗位面试流程是怎样的？ B 线技术类本科生参加腾讯的校园招聘，简历会被无视么？ 12.腾讯2014校园招聘_校园招聘_2014校园招聘 - 2014暑期实习
www.htntw.com/?detail/2633.html‎Translate this page
Feb 24, 2014 - 腾讯校园招聘信息概况. 校园招聘单位：腾讯. 校招岗位城市：全国. 校园招聘部门：腾讯. 校园招聘岗位：软件开发、安全技术、软件测试、技术运营、类 ...
腾讯校园招聘- 热门问答- 知乎
www.zhihu.com/topic/19647735‎Translate this page
腾讯实习生招聘笔试成绩对最终的录用有多大影响？ 腾讯校招技术类岗位面试流程是怎样的？ B 线技术类本科生参加腾讯的校园招聘，简历会被无视么？ 12.</p>
            <div class='bottom'>
                 <div class='bottom-radius'></div>
            </div>
        </div>        
    </div>
    </body>
</html>

 

 

 

posted @ 2014-03-15 17:05  cart55free99  阅读(147)  评论(0)  编辑  收藏  举报