美文网首页
两栏布局之将右边的dom放在前面

两栏布局之将右边的dom放在前面

作者: 六寸光阴丶 | 来源:发表于2020-10-17 17:40 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
      >
      <title>Document</title>
      <style>
        .margin-bottom {
          margin-bottom: 10px;
        }
    
        .container1 {
          position: relative;
        }
    
        .left1 {
          background-color: green;
          height: 200px;
          width: 200px;
          position: absolute;
          left: 0;
          top: 0;
        }
    
        .right1 {
          background-color: yellow;
          height: 200px;
          margin-left: 200px;
        }
    
        .container2 {
          display: flex;
          flex-direction: row-reverse;
        }
    
        .left2 {
          background-color: green;
          height: 200px;
          width: 200px;
        }
    
        .right2 {
          background-color: yellow;
          height: 200px;
          flex: 1;
        }
    
        .container3 {
          padding-left: 200px;
        }
    
        .left3 {
          background-color: green;
          height: 200px;
          width: 200px;
          float: left;
          margin-left: -100%;
          position: relative;
          left: -200px;
        }
    
        .right3 {
          background-color: yellow;
          height: 200px;
          width: 100%;
          float: left;
        }
      </style>
    </head>
    
    <body>
      <div class="container1 margin-bottom">
        <div class="right1">right</div>
        <div class="left1">left</div>
      </div>
      <div class="container2 margin-bottom">
        <div class="right2">right</div>
        <div class="left2">left</div>
      </div>
      <div class="container3">
        <div class="right3">right</div>
        <div class="left3">left</div>
      </div>
    </body>
    
    </html>
    
    image.png

    相关文章

      网友评论

          本文标题:两栏布局之将右边的dom放在前面

          本文链接:https://www.haomeiwen.com/subject/mxdfmktx.html