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，就不会被left的浮动影响到。

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    overflow: hidden;
  }
</style>
复制代码

• 设置 overflow: hidden 会触发 BFC 模式（Block Formatting Context）块级格式上下文。BFC是什么呢。用通俗的来讲就是，随便你在BFC 里面干啥，外面都不会受到影响 。
  • 此方法样式简单但不支持 IE 6

table

• table 的显示特性为每列的单元格宽度和一定等于表格宽度。
• table-layout: fixed 可加速渲染，也是设定布局优先。
• table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距

<style>
  .parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell;
    /*宽度为剩余宽度*/
  }
</style>
复制代码

flex

• 低版本浏览器兼容问题性能问题，只适合小范围布局

<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
    margin-left: 20px;
  }
  .right {
    flex: 1;
  }
</style>
复制代码

我们在学会一列定宽，一列自适应的布局后也可以方便的实现 多列定宽，一列自适应 多列不定宽加一列自适应。

等分布局

• 多列布局，每列根据浏览器宽度等比分配各自宽度；

<div class="parent">
  <div class="column">
    <p>1</p>
  </div>
  <div class="column">
    <p>2</p>
  </div>
  <div class="column">
    <p>3</p>
  </div>
  <div class="column">
    <p>4</p>
  </div>
</div>
复制代码

float+百分比

• 此方法可以完美兼容 IE8 以上版本

<style>
  .parent {
    margin-left: -20px;
  }
  .column {
    float: left;
    width: 25%;
    padding-left: 20px;
    // 将内边距和border放到元素的内容宽高里面
    box-sizing: border-box;
  }
</style>
复制代码

flex

• 强大简单，有兼容问题

<style>
  .parent {
    display: flex;
  }
  .column {
    flex: 1;
  }
  .column+.column { /* 相邻兄弟选择器 */
    margin-left: 20px;
  }
</style>
复制代码

table

<style>
  .parent-fix {
    margin-left: -20px;
  }
  .parent {
    display: table;
    width: 100%;
    /*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/
    table-layout: fixed;
  }
  .column {
    display: table-cell;
    padding-left: 20px;
  }
</style>
复制代码

等高布局

• 两列为例子，左边和右边的列高度相等；

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>
复制代码

table

• table 的特性为每列等宽，每行等高可以用于解决此需求

<style>
  .parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell
    /*宽度为剩余宽度*/
  }
</style>
复制代码

flex

• 设置flex布局之后，在侧轴上的排列方式默认为stretch，也就是未设置高度时，默认占满了整个容器的高；

<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
    margin-left: 20px;
  }
  .right {
    flex: 1;
  }
</style>
//注意这里实际上使用了 align-items: stretch，flex 默认的 align-items 的值为 stretch
复制代码

float

• 此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等，可用控制台查看。
• 兼容性较好。

<style>
  .parent {
    overflow: hidden;
  }
  .left,.right {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
  }
  .left {
    float: left;
    width: 100px;
    margin-right: 20px;
  }
  .right {
    overflow: hidden;
  }
</style>
复制代码

多列的等高布局

• 要求：
  • 多列中内容不确定高度，但是要求多列无论内容所占高度，每列都要是等高的；
  • 每一列的div 标签中的内容所占高度不同，而且没有明确的给 div 一个高度，而且也不知道这个内容会占多高；
  • 直接为所有 div 硬性的设置一个高度，是不行的，不灵活，不便后期维护；

.container {
    overflow: hidden;
}

div.item {
	// 相当于把每列的高度再加10000px
    padding-bottom: 10000px;
    // 又把每列div在文档流中所加的10000px减少了，这样后面紧跟元素就会紧跟着上来。
	margin-bottom: -10000px;
}
复制代码

到此，我们了解常见的布局解决方案，这些只是参考，一样的布局实现方式多种多样。 主要就使用position、flex 、table（从很久很久以前起，我们就抛弃了table布局页面，但display: table;是异常强大）、float等属性目前flex兼容性较差 傲娇的程序员应该放弃太低版本的浏览器。