实现这个三列等高 布局需要最外层的一个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. C++使用binder实例

    Android系统最常见也是初学者最难搞明白的就是Binder了,很多很多的Service就是通过Binder机制来和客户端通讯交互的.所以搞明白Binder的话,在很大程度上就能理解程序运行的流程. ...

  2. spring security oauth2.0 实现

    oauth应该属于security的一部分.关于oauth的的相关知识可以查看阮一峰的文章:http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html ...

  3. [django]利用xlwt实现文件下载功能

    代码: url.py: url(r'^importmould/$', 'keywork.views.xls_mould', name='xls_mould'), view.py: from djang ...

  4. leetcode -- Convert Sorted List to Binary Search Tree

    Given a singly linked list where elements are sorted in ascending order, convert it to a height bala ...

  5. zlib压缩一个文件为gzip格式

    网上有很多针对zlib的总结,但是很零散,自己经过总结,实现了用zlib压缩一个文件为gzip格式,似的可以直接使用winr工具解压. 具体方法是使用zlib的deflate系列函数,将buffer压 ...

  6. AC日记——C’s problem(c) TYVJ P4746 （清北学堂2017冬令营入学测试第三题）

    P4746 C’s problem(c)   时间: 1000ms / 空间: 655360KiB / Java类名: Main 背景 冬令营入学测试 描述 题目描述 小C是一名数学家,由于它自制力比 ...

  7. Swift中的willSet与didSet

    Swift中的willSet与didSet 周银辉 在Swift语言中用了willSet和didSet这两个特性来监视属性的除初始化之外的属性值变化 无需说太多,看看下面的代码你就能很快明白的 imp ...

  8. nodejs express 静态文件的路径

    当express 设置为静态文件服务器的时候.可以通过2种方式进行方位: 1,通过设置app.use('路径1','../a/b/image') express 路径的形式,如 src="路 ...

  9. Qt——透明无边框Widget的bug

    Experience 最近在封装一些类的时候,打算做一个窗口框架,能实现拖动.缩放.最大最小化.基本样式等功能,可不慎遇见一件无比蛋疼的事情,QWidget最小化后再恢复正常界面,最小化按钮居然仍处于 ...

  10. [[其他教程]] 2015年最新版iOS基础视频_最适合初学者入门

    主讲:孙庆虎类型:iOS 适合对象:初学者入门视频介绍:本视频是iOS学院精心录制的免费精华版iOS语言基础视频,该视频特点在于最大程度保证了知识点的完整性,按知识点进行视频录制,每个视频控制在20分 ...