美文网首页
两列布局---左侧自适应,右侧固定

两列布局---左侧自适应,右侧固定

作者: 时修七年 | 来源:发表于2018-06-17 07:15 被阅读0次

    方法一:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      
     <style>
       .wrapper {
         /* width: 500px; */
         border: 1px solid green;
         display: table;
       }
       .left {
         display: table-cell;
         background: #000;
         width: 5000px
       }
       .right {
         float: right;
         width: 100px;
       }
      
      </style>
    </head>
    <body>
    <div class="wrapper">
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
    </body>
    </html>
    
    

    方法2:flex布局

    方法3:把right写在left前面,让right右浮动;
    http://jsbin.com/bovakuduxi/edit?html,css,output

    相关文章

      网友评论

          本文标题:两列布局---左侧自适应,右侧固定

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