您的位置：首页 > Web前端 > CSS

三列等高 css实现

2015-08-05 17:49 716 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航