实现这个三列等高 布局需要最外层的一个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="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="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="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="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="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="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>