css负边距margin

关于负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>

其运行结果如下