css经典布局系列二——等分等高布局

一列定宽，一列自适应

• 要求两列，左边一列固定宽度，右边一列根据浏览器自适应；

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

float + margin

• 左边浮动，右边设置margin-left等于左边元素宽度

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    margin-left: 100px
    /*间距可再加入 margin-left */
  }
</style>

• IE 6 中会有3像素的 BUG，解决方法可以在 .left 加入 margin-left:-3px

  • 解决这个小bug的方案如下：

  <style>
    .left {
      float: left;
      width: 100px;
    }
    .right-fix {
      float: right;
      width: 100%;
      margin-left: -100px;
    }
    .right {
      margin-left: 100px
      /*间距可再加入 margin-left */
    }
  </style>
  

  • 此方法不会存在 IE 6 中3像素的 BUG，但 .left 不可选择， 需要设置 .left {position: relative} 来提高层级。
  • 注意此方法增加了不必要的 HTML 文本结构。
  • 傲娇的程序员应该放弃太低版本的浏览器

float + overflow

• 相当于right也开启了bfc࿰