实现这个三列等高 布局需要最外层的一个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. 关于Composer——好久不动手了。。。

    六月第一“血” 看书,发现喜欢从尾开始读起,然后 php经典实例 中,最后一章是PEAR内容,知乎上一查,完,过时了,完全都是Composer,那就学一下吧 一.啥东西 一句话:依赖管理工具: 解释: ...

  2. 【2016-10-27】【坚持学习】【Day14】【VS 配置管理器 AssemblyInfo 】

    有这样一个需求,不同客户,有不同的逻辑,通过配置管理器和条件编译进行 自动执行正确的代码.

  3. 如何用python在Windows系统下，生成UNIX格式文件

    平时测试工作中,少不了制造测试数据.最近一个项目,我就需要制造一批可在UNIX下正确读取的文件.为确保这批文件能从FTP下载成功,开发叮嘱我:“文件中凡是遇到换行,换行符必须是UNIX下的LF,而不是 ...

  4. POJ3160 Father Christmas flymouse[强连通分量 缩点 DP]

    Father Christmas flymouse Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 3241   Accep ...

  5. Libsvm Matlab 快速安装教程 （适用于Win7+, 64bit, and Matlab2016a+）

    近日在开始学习Machine Learning SVM 相关算法,将Matlab平台安装SVM的步骤记录如下,亲测可用: 开发环境: Windows 8 64 bit, Matlab 2016a, S ...

  6. 基于xml的Spring多数据源配置和使用

    上一篇讲了<基于注解的Spring多数据源配置和使用>,通过在类或者方法上添加@DataSource注解就可以指定某个数据源.这种方式的优点是控制粒度细,也更灵活. 但是当有些时候项目分模 ...

  7. 一种全新的屏幕适配方法 自动百分比适配 一切px说了算

    看hongyang的博客 发现他的一个按百分比适配的方案 : 库地址https://github.com/hongyangAndroid/AndroidAutoLayout 博客地址http://bl ...

  8. Java 8新特性终极指南

    目录结构 介绍 Java语言的新特性 2.1 Lambdas表达式与Functional接口 2.2 接口的默认与静态方法 2.3 方法引用 2.4 重复注解 2.5 更好的类型推测机制 2.6 扩展 ...

  9. HTML编写需要注意的事项

    HTML在编写过程中需要注意许多关键的事项,就如最近我在学习中遇到的问题如下: 代码规范问题: 在代码视图中编写代码,一定要规范的格式,不要把代码全部都写到一块,这样不仅影响效率,更加影响视觉,当出现 ...

  10. Using Internal EEPROM of PIC Microcontroller

    There are commonly three types of memories in a PIC Microcontroller, Flash Program Memory, Data Memo ...