利用css实现两列等高的方法

来源：互联网发布：js throw exception 编辑：程序博客网时间：2024/05/17 04:20

1:利用负边距

.container{
width:980px
background: pink;

overflow:hidden;

}

/*清楚浮动*/

.clearfloat{
  zoom:1;
}
.clearfloat:after{
  display:block;
  clear:both;
content:"";
height: 0;
line-height: 0;
visibility: hidden;
}

/*清楚浮动*/
.mainbox{
width:650px;
float:left;
background: red;

margin-bottom:-9999px;

padding-bottom:9999px;

}
.sidebox{
width:280px;
float: right;
background: green;

margin-bottom:-9999px;

padding-bottom:9999px;

}

</style>

2：利用背景图片在Y方向重复

.container{
width:980px
background: url(images/a.png) repeat-y 0 0;

}

/*清楚浮动*/

.clearfloat{
  zoom:1;
}
.clearfloat:after{
  display:block;
  clear:both;
  content:"";
  height: 0;
  line-height: 0;
  visibility: hidden;
}

/*清楚浮动*/
.mainbox{
width:650px;
float:left;

}
.sidebox{
width:280px;
float: right;

}

</style>

3：利用边框模拟（定位元素的高度不能大于非定位元素的高度）

.container{
width:980px;

positin:relative;

}

/*清楚浮动*/

.clearfloat{
zoom:1;
}
.clearfloat:after{
display:block;
clear:both;
content:"";
height: 0;
line-height: 0;
visibility: hidden;
}

/*清楚浮动*/
.mainbox{
width:650px;
float:left;
background: red;

border-right:280px solid green;

}
.sidebox{
width:280px;

position:absolute;

top:0;

right:0;

}

</style>

div class="container clearfloat">
<div class="mainbox">主要</div>
<div class="sidebox">侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏</div>
</div>

0 0