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

2019独角兽企业重金招聘Python工程师标准>>>

 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>

转载于:https://my.oschina.net/u/1403185/blog/311399

总结

以上是生活随笔为你收集整理的web前端技术杂谈--css篇(1)--浅谈margin(续)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。