web前端技术杂谈--css篇(1)--浅谈margin(续)

 1.margin负值实现左右两列布局(左边固定宽度,右边自适应)代码如下:

     css代码:

     .main{
            padding: 0 0 0 200px;
        }
        .left{
            width: 200px;
            height: 50px;
            margin-left: -200px;
            background-color: #8b4513;
            float: left;
        }
        .right{
            width: 100%;
            height: 50px;
            background-color: #f4a460;
            float: left;
        }

     html代码:

      <div class="main">
        <div class="left"></div>
        <div class="right"></div>
      </div>

 2.margin实现左中右三列布局(左右定宽,中间自适应)

    css代码:

      .left{
            width: 200px;
            height: 50px;
            margin-left: -200px;
            background-color: #8b4513;
            float: left;
        }
        .content{
            width: 100%;
            height: 50px;
            background-color: silver;
            float: left;
        }
        .right{
            width: 200px;
            height: 50px;
            margin-right: -200px;
            background-color: #f4a460;
            float: left;
        }

      html代码:

      <div class="main">
         <div class="left"></div>
         <div class="content"></div>
         <div class="right"></div>
     </div>

3.margin实现定位的效果

      css代码:

       .demo1{
            width: 300px;
            height: 300px;
            background-color: #8b4513;
        }
        .demo2{
            width: 100px;
            height: 100px;
            background-color: silver;
            margin-top: -200px;
            margin-left: 100px;
        }

      html代码:

       <div class="demo1"></div>
       <div class="demo2"></div>

你可能感兴趣的:(web前端技术杂谈--css篇(1)--浅谈margin(续))