实现这个三列等高 布局需要最外层的一个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. iOS 10 的坑：新机首次安装 app，请求网络权限“是否允许使用数据”(转)

    症状 iOS 10 之后,陆陆续续地有用户联系我们,说新机第一次安装.第一次启动的时候,app 首屏一片空白,完全没数据.kill 掉重新打开就好了. 一开始以为是用户网络情况不好,但随着越来越多的用 ...

  2. gitlab备份及迁移

    Gitlab 创建备份 使用Gitlab一键安装包安装Gitlab非常简单, 同样的备份恢复与迁移也非常简单. 使用一条命令即可创建完整的Gitlab备份: gitlab-rake gitlab:ba ...

  3. [WPF系列]-TreeView的常用事项

    引言 项目经常会用Treeview来组织一些具有层级结构的数据,本节就将项目使用Treeview常见的问题作一个总结. DataBinding数据绑定 DataTemplate自定义 <Hier ...

  4. FineReport根据点击次数奇偶性排序之字符型

    上一篇文章我们提到了字段为数据型的数据列排序方法,采用的是根据点击次数奇偶性来排序,那如果是字段为字符型,又该如何实现呢? 这里提供的解决思路是通过超级链接来实现升序降序两张模板之间的相互调用,每点击 ...

  5. POJ2528Mayor's posters[线段树 离散化]

    Mayor's posters Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 59683   Accepted: 17296 ...

  6. AngularJS中的模板安全与作用域绑定

    欢迎大家指导与讨论 : ) 一.前言 摘要:指令compile.$sce.作用域绑定.$compileProvider和其他资源安全设置.本文是笔者在学习时整理的笔记,由于技术还不够高,如果本章中有错 ...

  7. VS一直停留在“正在还原nuget程序包”

    VS一直停留在“正在还原nuget程序包” 在开发何问起收藏夹的时候,准备在WinFrom中加入网页浏览器,于是下载了一个CEFSharp的源码,生成解决方案的时候,一直提示“正在还原nuget程序包 ...

  8. ZooKeeper 笔记(1) 安装部署及hello world

    先给一堆学习文档,方便以后查看 官网文档地址大全: OverView(概述) http://zookeeper.apache.org/doc/r3.4.6/zookeeperOver.html Get ...

  9. 判断.net中在windows系统下的字节序

    字节序,是指字节在内存中的存储顺序.其又分为大端字节(Big-Endian)序和小端字节序(Little-Endian). 以下摘自百度百科: a) Little-Endian就是低位字节排放在内存的 ...

  10. 聊聊 Web 项目二维码生成的最佳姿势

    在设计和实现的过程之后,你永远不知道部署上去的程序会已什么样的姿势运行. 本篇借一次生成二维码逻辑的不同实现,阐述 Web 项目中二维码生成的正确姿势. 文中如有批量,欢迎各位看客老爷拍砖.试运行前5 ...