概念网络 开启企业建站营销新时代、免费建站平台倡导者  站长学院
热线:18651068070
您现在的位置:首页 > 站长学院 > 建站资讯 > 经验

谈谈css左右等高的几个方法

作者:概念网络 日期:2016-02-24 12:05:14 人气:43

  

等高布局的使用场景有很多,很多时候为了满足某列的背景或者边框跟外框高度一样,并且不受其他列动态变化高度的影响。一般我会考虑几种方式:

一、负margin实现

 代码如下复制代码

.row-wrap {
overflow: hidden;
}
.row1, .row2, .row3 {
padding: 10px;
margin-bottom: -1000px;
padding-bottom: 1000px;
}
.row1{
width: 120px;
background: #F2F2F2;
float: left;
}
.row2{
width: 300px;
background: #81C0F2;
color: #FFF;
float: left;
_margin-right: -6px; //fix ie6
}
.row3{
width: 150px;
background: #FF6600;
color: #FFF;
overflow: hidden;
zoom: 1; //触发haslayout
}

<div class="row-wrap">
<div class="row1">
<p>悉尼洲际...</p>
</div>
<div class="row2">
<p>酒店离悉尼海滨...</p>
</div>
<div class="row3">
<p>在砂岩商场...</p>
</div>
</div>

 


回到顶部