zoukankan      html  css  js  c++  java
  • 三个等高列

    三个等高列

    如何实现呢?

    方式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>
  • 相关阅读:
    mysql的常用函数
    oracle的常用函数
    oracle 11g安装(转)
    Oracle TNS配置浅析
    PL/SQL Developer连接本地Oracle 11g 64位数据库
    mysql之对视图的操作
    mysql之对索引的操作
    mysql之对表的操作
    Mac机装Win7后 启动只见鼠标怎么办
    天高云淡风轻
  • 原文地址:https://www.cnblogs.com/cart55free99/p/3602238.html
Copyright © 2011-2022 走看看