css负边距margin
程序员文章站
2022-06-14 14:54:44
...
关于负margin的原理,参见文章:
http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812
应用:
http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html
应用之一:等高布局(其他方法可查看
http://blog.csdn.net/charlene0824/article/details/51222502)
<div class="container">
<div class="item1">该方法是通过负margin,同时将padding的值设为正的margin值实现的 该方法是通过负margin,同时将padding的值设为正的margin值实现的 该方法是通过负margin,同时将padding的值设为正的margin值实现的 </div>
<div class="item2">该方法是通过负margin,同时将padding的值设为正的margin值实现的 该方法是通过负margin,同时将padding的值设为正的margin值实现的 该方法是通过负margin,同时将padding的值设为正的margin值实现的 该方法是通过负margin,同时将padding的值设为正的margin值实现的 该方法是通过负margin,同时将padding的值设为正的margin值实现的 该方法是通过负margin,同时将padding的值设为正的margin值实现的 </div>
</div>
css:
.container{
width:800px;
background-color: #98F59E;
overflow: hidden;
}
.item1,.item2{
float:left;
width:300px;
background-color: #96FCEF;
word-wrap: break-word;
margin-left:10px;
margin-bottom: -10000px;
padding-bottom:10000px;
border: 2px solid #A7525C;
}
运行结果:
该方法的缺点是等高的div没有底边的边框。常用的解决方式是使用背景图来模仿底部边框或使用div来模仿列的边框。下面主要介绍第二种方法,第二种方法主要是在等高元素中加入一个相对于容器绝对定位的div元素,并设置其高度为边框高度
<div class="container">
<div class="item1">该方法是通过负margin,同时将padding的值设为正的margin值实现的 该方法是通过负margin,同时将padding的值设为正的margin值实现的 该方法是通过负margin,同时将padding的值设为正的margin值实现的
<div class='colBottom1'></div>
</div>
<div class="item2">该方法是通过负margin,同时将padding的值设为正的margin值实现的 该方法是通过负margin,同时将padding的值设为正的margin值实现的 该方法是通过负margin,同时将padding的值设为正的margin值实现的 该方法是通过负margin,同时将padding的值设为正的margin值实现的 该方法是通过负margin,同时将padding的值设为正的margin值实现的 该方法是通过负margin,同时将padding的值设为正的margin值实现的
<div class='colBottom2'></div>
</div>
</div>
<style type="text/css">
.container{
width:800px;
background-color: #98F59E;
overflow: hidden;
position: relative;
}
.item1,.item2{
float:left;
width:300px;
background-color: #96FCEF;
word-wrap: break-word;
margin-left:10px;
margin-bottom: -10000px;
padding-bottom:10000px;
border: 2px solid #A7525C;
}
.colBottom1{
position: absolute;
bottom: 0;
left: 10px;
height: 2px;
width: 304px;
background-color:#A7525C;
}
.colBottom2{
position: absolute;
bottom: 0;
left: 324px;
height: 2px;
width: 304px;
background-color:#A7525C;
}
</style>
其运行结果如下