可能用到的负边距应用

最新推荐文章于 2025-05-18 16:24:05 发布

weixin_34309435

最新推荐文章于 2025-05-18 16:24:05 发布

阅读量84

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zengjie123/p/4679071.html

一、左右固定，中间自适应

HTML：

<div class="main">
        <div class="main_body">Main</div>
    </div>
    <div class="left">Left</div>
    <div class="right">Right</div>
CSS：

 body{
        margin:0;
        padding:0;
        min-width:600px;
    }
    .main{
        float:left;
        width:100%;
    }
    .main_body{
        margin:0 210px;
        background:#888;
        height:200px;
    }
    .left,.right{
        float:left;
        width:200px;
        height:200px;
        background:#F60;
    }
    .left{
        margin-left:-100%;
    }
    .right{
        margin-left:-200px;
    }
二、负边距+定为水平居中
html

<div id="test"></div>
css：

    body{margin:0;padding:0;}
    #test{
        width:200px;
        height:200px;
        background:#F60;
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }

三、多列等高

  <div id="wrap">
        <div id="left">
            <p style="height:50px">style="height:50px"</p>
        </div>
        <div id="center">
            <p style="height:100px">style="height:100px"</p>
        </div>
        <div id="right">
            <p style="height:200px">style="height:200px"</p>
        </div>
    </div>
CSS：

   body,p{
        margin:0;
        padding:0;
    }
    #wrap{
        overflow:hidden;
        width:580px;
        margin:0 auto;
    }
    #left,#center,#right{
        margin-bottom:-200px;
        padding-bottom:200px;
    }
    #left {
        float:left;
        width:140px;
        background:#777;
    }
    #center {
        float:left;
        width:300px;
        background:#888;
    }
    #right {
        float:right;
        width:140px;
        background:#999;
    }
    p {color:#FFF;text-align:center}

转载于:https://www.cnblogs.com/zengjie123/p/4679071.html