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

最新推荐文章于 2022-08-31 07:15:56 发布

我行我上

最新推荐文章于 2022-08-31 07:15:56 发布

阅读量1.6k

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/yangjidaimin/article/details/51012549

版权

前端开发专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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>