欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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;
    }

运行结果:
css负边距margin

该方法的缺点是等高的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>

其运行结果如下
css负边距margin