【页面布局】各类浮动、固定布局

◇组件名称:

    页面布局

◇功能描述：

    各类浮动、固定布局的实例。

1.两列的浮动布局

    

    ·一列向左浮动，一列向右浮动，则可以对中间创建视觉隔离带。
    ·为提高易用性和可访问性，源代码中主要内容应位于次要内容前面。

    DEMO：点此打开

2.三列的浮动布局

    

    ·利用二列浮动布局的原理。

    DEMO：点此打开

3.流式布局（百分比设定宽度）

    ·利用百分比布局而不是固定像素。

.wrapper {
  width: 76.8%; 
  margin: 0 auto; 
  text-align: left;
}
.content .primary { 
  width: 72.82%;
  float: right;
  display:inline;
}
.content .secondary { 
  width: 25%;
  float: left; 
  display:inline;
} 
.content .primary .primary {
  width: 59.7%;
  float: left;
  display:inline;
}
.content .primary .secondary {
  width: 34.33%;
  padding-right: 2.63%;
  float: right;
  display:inline;
}

    DEMO：点此打开

4.弹性布局（相对字号设定宽度）

    ·外部wrapper使用em布局，内部宽度仍然使用百分数。这样可以方便的修改布局的总尺寸，不必修改每个元素的宽度，这种解决方案灵活易维护。

body {
  font: 62.5%;/*设置1em等于10px方便布局*/
  text-align:center;
}
.wrapper {
  width: 92em;
  max-width: 95%;
  margin: 0 auto; 
  text-align: left;
}
.content .primary { 
  width: 72.82%;
  float: right;
  display:inline;
}
.content .secondary { 
  width: 25%;
  float: left; 
  display:inline;
} 
.content .primary .primary {
  width: 59.7%;
  float: left;
  display:inline;
}
.content .primary .secondary {
  width: 34.33%;
  padding-right: 2.63%;
  float: right;
  display:inline;
}

    DEMO：点此打开