左边定宽, 右边自适应方案

左边定宽, 右边自适应方案

方法一:

左边左浮动, 右边添加margin-left

  <style>
  *{
    margin: 0;
    padding: 0;
  }
  .left{
    background-color: #ccc;
    float: left;
    width: 200px;
  }
  .right{
    background-color: #aaa;
    margin-left: 200px;
  }
  </style>
  <body>
    <div class="left">
      <h4>Left</h4>
    </div>
    <div class="right">
      <h4>Right</h4>
    </div>
  </body>

方法二:

左边左浮动, 右边添加overflow: hidden
 此方法在IE6不兼容

  <style>
  *{
    margin: 0;
    padding: 0;
  }
  .left{
    background-color: #ccc;
    float: left;
    width: 200px;
  }
  .right{
    background-color: #aaa;
    overflow: hidden;
  }
  </style>
  <body>
    <div class="left">
      <h4>Left</h4>
    </div>
    <div class="right">
      <h4>Right</h4>
    </div>
  </body>

方法三:

左边使用绝对定位, 右边添加margin-left

  <style>
  *{
    margin: 0;
    padding: 0;
  }
  .left{
    background-color: #ccc;
    float: left;
    width: 200px;
    position: fixed;
    top: 0;
    left: 0;
  }
  .right{
    background-color: #aaa;
     margin-left: 200px; 
    /* overflow: hidden; */
  }
  </style>
<body>
  <div class="left">
    <h4>Left</h4>
  </div>
  <div class="right">
    <h4>Right</h4>
  </div>
</body>

方法四:

左边使用绝对定位, 右边也使用绝对定位

  <style>
  *{
    margin: 0;
    padding: 0;
  }
  .left{
    background-color: #ccc;
    float: left;
    width: 200px;
    position: fixed;
    top: 0;
    left: 0;
  }
  .right{
    background-color: #aaa;
    position: fixed;
    top: 0;
    left: 200px;
  }
  </style>
<body>
  <div class="left">
    <h4>Left</h4>
  </div>
  <div class="right">
    <h4>Right</h4>
  </div>
</body>

方法五:

使用嵌套div的方法, 没有想明白原因

  • 左右浮动, 左边宽度给定. 右边宽度100%,
  • 左边再给左边一个margin-right: 100%的话, 右边就上去了, 并且可以把左边遮掉.
  • 这个时候, 再给右边里面盒子一个左边距, 把位置让开.
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .left {
      background-color: #ccc;
      float: left;
      width: 200px;
      margin-right: -100%;
    }

    .right {
      float: left;
      width: 100%;
    }

    .right_inner {
      background-color: #aaa;
      margin-left: 200px;
    }
  </style>
<body>
  <div class="left">
    <h4>Left</h4>
  </div>
  <div class="right">
    <div class="right_inner">
      <h4>Right</h4>
    </div>
  </div>
</body>

方法六

左边设置浮动, 右边设置宽度100%

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .left {
      background-color: #ccc;
      float: left;
      width: 200px;
    }

    .right {
      width: 100%;
      background-color: #aaa;
    }
  </style>
  <div class="left">
    <h4>Left</h4>
  </div>
  <div class="right">
    <h4>Right</h4>
  </div>
posted @ 2017-10-09 14:24  张润昊  阅读(144)  评论(0)  编辑  收藏  举报