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

最新推荐文章于 2024-09-27 15:52:57 发布

weixin_34138139

最新推荐文章于 2024-09-27 15:52:57 发布

阅读量93

点赞数

文章标签：前端 python ViewUI

原文链接：https://my.oschina.net/u/1403185/blog/311399

版权

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代码：

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代码：

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代码：

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