实现这个三列等高 布局需要最外层的一个div wrap容器 里面有三个div容器 这个最外层div 需要移除隐藏 overflow:hidden;  关键点就是三列div 同时margin-bottom 向下移动10000个像素 padding-bottom在向上移动回10000 像素  只要在10000像素内(这里保持同样的像素即可，比如10px) 就会保持等高的状态  兼容是全兼容 所有浏览器

效果截图

代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<style type="text/css">

    #warp{

        width: 990px;

        overflow: hidden;

        margin: 0px auto;

    }

    #left{

        float: left;

        width: 250px;

        background: #ff9d6b;

    }

    #center{

        float: left;

        width: 500px;

        background: #003399;

    }

    #right{

        float: right;

        width: 240px;

        background: #008200;

    }

    /*关键*/

    #left,#right,#center{

        margin-bottom: -10000px;

        padding-bottom: 10000px;

    }

</style>

<div id="warp">

    <div id="left">

        <div>内容都是动态的有的多有的少 三列最后都是需要登高</div>

    </div>

    <div id="center">

        <div>内容都是动态的有的多有的少 三列最后都是需要登高</div>

        <div>内容都是动态的有的多有的少 三列最后都是需要登高</div>

        <div>内容都是动态的有的多有的少 三列最后都是需要登高</div>

        <div>内容都是动态的有的多有的少 三列最后都是需要登高</div>

        <div>内容都是动态的有的多有的少 三列最后都是需要登高</div>

        <div>内容都是动态的有的多有的少 三列最后都是需要登高</div>

        <div>内容都是动态的有的多有的少 三列最后都是需要登高</div>

        <div>内容都是动态的有的多有的少 三列最后都是需要登高</div>

        <div>内容都是动态的有的多有的少 三列最后都是需要登高</div>

        <div>内容都是动态的有的多有的少 三列最后都是需要登高</div>

        <div>内容都是动态的有的多有的少 三列最后都是需要登高</div>

        <div>内容都是动态的有的多有的少 三列最后都是需要登高</div>

    </div>

    <div id="right">

        <div>内容都是动态的有的多有的少 三列最后都是需要登高</div>

        <div>内容都是动态的有的多有的少 三列最后都是需要登高</div>

        <div>内容都是动态的有的多有的少 三列最后都是需要登高</div>

    </div>

</div>

</body>

</html>

完整实例

需要注意的就是外围父元素和子元素都是块元素 div等 padding-bottom=0px; margin-bottom=-0px;这个值也是根据实际高度取到合适的值

以下是实例 　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<style type="text/css">

    .solution_block{

        overflow: hidden;

    }

    .solution_block a{

        padding: 28px 32px 0px 29px;

        margin-right: 14px;

        padding-bottom: 63px;

        margin-bottom: -63px;

        display: block;

        float: left;

    }

    .solution_block a.common_solution{

        background:#35a5f4 ;

    }

    .solution_block a span.icon{

        width: 82px;

        float: left;

        display: block;

    }

    .solution_block a .right{

        width:231px;

        margin-left: 16px;

        float: left;

        display: block;

    }

    .solution_block a.common_solution .right h5{

        font-size: 1.1875em;

        font-family:"\5FAE\8F6F\96C5\9ED1";

        margin-bottom: 10px;

        margin-top: 0px;;

    }

    .solution_block a .right p{

        margin-bottom: 38px;

        line-height: 18px;

        font-family:  "\5FAE\8F6F\96C5\9ED1";

    }

</style>

<!--<div class="solution_block">

    <a href="" class="common_solution">

        <span class="icon"><img src="data:images/siyouyun2_gongneng_pic1.png"></span>

        <div class="right">

            <h5>自主私有云</h5>

            <p>文字多少都是等高。所谓自主私有云， 即在企业自由数据中心， 为企业部署私有云环境，交付后由企业自行运维管理，优势在于完全自主可控；但是企业需要构建自己的云平台运维团队。</p>

        </div>

    </a>

    <a href="" class="common_solution">

        <span class="icon"><img src="data:images/siyouyun2_gongneng_pic2.png"></span>

        <div class="right">

            <h5>等保托管私有云</h5>

            <p>文字多少都是等高，都是块元素 div等.所谓等保托管私有云， 即为了满足合规性的要求，由象云在符合等保要求的象云自由数据中心为客户部署私有云，从机房、网络到服务器以及互联网出口网络完全独享，且符合等保需要的各种安全合规要求。</p>

        </div>

    </a>

    <a href="" class="common_solution end">

        <span class="icon"><img src="data:images/siyouyun2_gongneng_pic3.png"></span>

        <div class="right">

            <h5>托管私有云</h5>

            <p>对于没有等保要求的用户，可以在象云的数据中心采用独享的服务器、存储等硬件资源构建私有云， 但是共享数据中心的基础设施和网络，基础运维由象云提供， 优势在于降低私有云的使用和运维成本, 并且可以通过二层网络与公有云建立网络通道，快速构建混合云的场景

            </p>

        </div>

    </a>

</div>-->

<div class="solution_block">

    <a href="" class="common_solution">

        <span class="icon"><img src="data:images/siyouyun2_gongneng_pic1.png"></span>

        <div class="right">

            <h5>自主私有云</h5>

            <p>文字多少都是等高。文字多少都是等高。文字多少都是等高。文字多少都是等高。</p>

        </div>

    </a>

    <a href="" class="common_solution">

        <span class="icon"><img src="data:images/siyouyun2_gongneng_pic2.png"></span>

        <div class="right">

            <h5>等保托管私有云</h5>

            <p>文字多少都是等高，都是块元素 div等.文字多少都是等高，都是块元素 div等.文字多少都是等高，都是块元素 div等.文字多少都是等高，都是块元素 div等.

                文字多少都是等高，都是块元素 div等.文字多少都是等高，都是块元素 div等.</p>

        </div>

    </a>

    <a href="" class="common_solution end">

        <span class="icon"><img src="data:images/siyouyun2_gongneng_pic3.png"></span>

        <div class="right">

            <h5>托管私有云</h5>

            <p>等高列CSS padding-bottom:0px margin-bottom:-0px; 一正一负相等，这个值跟着整体的高度变化 ，

                现在这个值 padding-bottom:90px margin-bottom:-90px;根据高度的大小来变化尽量高的

            </p>

        </div>

    </a>

</div>

</body>

</html>

　　

三列等高 css实现的更多相关文章

  1. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  2. 纯css实现div三列等高布局的最简单方法简化版/也可以多列

    使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...

  3. 三列布局，读《css那些事儿》

    1.两列定宽,中间自适应 要点:浮动.负边距效果.mainbox增加内容div并设置margin.:after清除浮动 原理:mainbox的浮动并将其宽度设置为100%,次要内容及侧边栏设置固定宽度 ...

  4. CSS 3列等高

    方法1: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"&g ...

  5. CSS技巧 (2) · 多列等高布局

    前言  最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...

  6. css设置多列等高布局

    初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...

  7. css三列布局之双飞翼pk圣杯

    三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...

  8. [CSS布局]简单的CSS三列布局

    前言 公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结.倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在 ...

  9. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

随机推荐

  1. CSS补充与JavaScript基础

    一.CSS补充 position 1.fiexd 固定在页面的某个位置; 示例将顶部菜单始终固定在页面顶部 position: fixed; 将标签固定在某个位置 right: 0; 距离右边0像素 ...

  2. windows socket编程select模型使用

    int select(         int nfds,            //忽略         fd_ser* readfds,    //指向一个套接字集合,用来检测其可读性       ...

  3. 浅谈Linux中的信号处理机制（三）

    一晃眼,已经到9月底了,都来不及去感慨时间匆匆.最近常常会想明年的今天我将会在那里干着什么样的工作?对未来又是憧憬又是担忧,压力山大.无论如何现在还是踏踏实实的学习吧,能这样安安静静学习的日子也不多了 ...

  4. JSCH通过密钥文件进行远程访问

    需求:WEB app 需要使用JSCH来通过密钥文件的方式进行SFTP/SSH访问远程LINUX机器 实现方式:假设远程机器都含有用户名为hadoop的用户,因为密码因为策略的要求密码会随时间发生变化 ...

  5. [很郁闷]python2.7连接mysql5.5配置

    前言:今天在公司电脑上python版本跟自己家里电脑上的一样,不一样的是mysql公司版本5.6,结果花了两天的时间都没配置好python和mysql 简单说就是python连接mysql一直报200 ...

  6. POJ2484 A Funny Game[博弈论]

    A Funny Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5401   Accepted: 3381 Desc ...

  7. Session跟SessionFactory的线程安全与非安全

    SessionFactory负责创建session,SessionFactory是线程安全的,多个并发线程可以同时访问一个 SessionFactory 并从中获取Session实例. (Sessio ...

  8. idea快捷键(自用)

    idea快捷键(自用) 1.比如输入eclipse下面的main,sysout等,在idea里面同样可以实现,如下: sysout(sout 按tab),main(psvm按tab),具体可按照ctr ...

  9. C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 网络订单提醒功能，网点区域功能增强

    客户端会提醒是否有网络订单来了,这样及时处理网络上的用户下单,当然也会有手机短信系统,全国几千个网点就可以协同作战了,竟然有序的处理海量用户的下单.网络订单提醒功能增强效果如下: 系统每5分钟会检查一 ...

  10. CSS代码实例:用CSS代码写出的各种形状图形

    一共收集整理了图形20个,比较实用,同时也为了熟悉CSS的代码.整合了一下,有错误欢迎指出. 1.正方形 #square { width: 100px; height: 100px; backgrou ...