实现这个三列等高 布局需要最外层的一个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. 【Linux】解决Wesnoth中文乱码问题

    现在使用的系统是Linux Mint 18,安装了Wesnoth,发现打开之后部分中文显示正常,部分中文显示为乱码. 谷歌出的很多办法都只给出了几条指令,但并不具有普适性,我提供一种新的方法,通过修改 ...

  2. Object.observe将不加入到ES7

    先请看 Object.observe 的 API Object.observe(obj, callback[, acceptList]) 它用来监听对象的变化,当给该对象添加属性,修改属性时都会被依次 ...

  3. Eclipse相关设置与优化

    原文:http://chaoxz2005.blog.163.com/blog/static/15036542013411105519685/ 一般在不对eclipse进行相关设置的时候,使用eclip ...

  4. (转)CNBLOG离线Blog发布方法

    原文章路径:http://www.cnblogs.com/liuxianan/archive/2013/04/13/3018732.html (新添了插件路径) 去年就知道有这个功能,不过没去深究总结 ...

  5. DBCP连接池简介

    DBCP连接池简介 1.数据库连接基础 数据库连接池基础主要包括以下三个方面的内容:数据库连接池的基本概念.数据库连接池的工作原理.Java开源的连接池.下面将从这三个方面一一介绍: (1)数据库连接 ...

  6. Java报表工具FineReport导出EXCEL的四种API

    在实际的应用中会经常需要将数据导出成excel,导出的方式除原样导出还有分页导出.分页分sheet导出和大数据量导出.对于excel 2003版,由于限制了每个sheet的最大行数和列数,大数据量导出 ...

  7. Hibernate一对多关联

    一对多双向关联关系:(Dept/Emp的案例) 既可以根据在查找部门时根据部门去找该部门下的所有员工,又能在检索员工时获取某个员工所属的部门. 步骤如下: 1.构建实体类(部门实体类加set员工集合) ...

  8. NOIP2010关押罪犯[并查集｜二分答案＋二分图染色 | 种类并查集]

    题目描述 S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨气值”(一个正整数值)来表示 ...

  9. return和finally的执行和联系

    1.try{}里有一个return语句,那么紧跟在这个try后的finally {}里的code会不会被执行,什么时候被执行,在return前还是后? 也许你的答案是在return之前,但往更细地说, ...

  10. JS文件加载：比较async和DOM Script

    async与script动态加载都能使文件异步加载,本文叙述它们对页面渲染和load加载的影响方面. 目前我用demo.js作为执行文件操作.代码: var now = function() { re ...