web前端技術雜談--css篇(1)--淺談margin(續)

時間 2019-12-07

標籤 web 前端技術雜談 css 淺談 margin 欄目 HTML 简体版

原文原文鏈接

1.margin負值實現左右兩列布局（左邊固定寬度，右邊自適應）代碼以下：css

css代碼：html

     .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代碼：spa

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

2.margin實現左中右三列布局（左右定寬，中間自適應）class

css代碼：float

      .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代碼：im

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

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