常见pc端网页的5中布局方式

本文是在上一篇blog的圣杯布局和双飞翼布局基础上的一些改进。

不考虑把layout__main这个元素放在最前面，虽然经典的做法都要求把layout__main做法放在前面，这样可以让网页主体内容优先渲染，我认为这种考虑是完全多余的。

两栏的布局

1.左侧固定，主要内容自适应

主要运用知识点

• 负边距 margin-left: -.....；
• 浮动 float:left;
• 填充 padding;

     <div class="layout">
       <div class="layout_left"></div>
       <div class="layout_main"></div>
     </div>    

css样式

.layout:after{
   display: block;
   content: "";
   clear:both;
}
.layout{
  padding-left: 210px;
}
.layout_left,.layout_main{
  height: 100px;
  float: left;
}
.layout_main{
  width:100%;
  background: red;
}
.layout_left{
  width: 200px;
  background: green;
  margin-left: -210px;
}

2. 右侧固定左侧主要内容自适应

主要运用知识点

• 负边距 margin-left: -.....；
• 浮动 float;
• 填充 padding;
• 注意相对于左边固定浮动变成了右浮动相应的负边距也变成了右

     <div class="layout">
       <div class="layout_main"></div>
       <div class="layout_right"></div>
     </div>    

css样式

.layout:after{
   display: block;
   content: "";
   clear:both;
}
.layout{
  padding-right: 210px;
} 
.layout_main{
  width:100%;
  background: red;
  height: 100px;
  float: left;
}
.layout_right{
  float: right;
  width: 200px;
  height: 100px;
  background: green;
  margin-right: -210px;
}

三栏布局

在传统的圣杯布局上有一些改动，效果和圣杯布局相似

左右2边固定，中间内容自适应

主要运用知识点

• 负边距 margin-left: -.....；
• 浮动 float;
• 填充 padding;
• 注意左右浮动和左右负边距

<div class="layout">
    <div class="layout">
      <div class="layout_left"></div>
      <div class="layout_main"></div>
      <div class="layout_right"></div>
    </div>
</div>

css样式

.layout:after{
   display: block;
   content: "";
   clear:both;
}
.layout{
  padding: 0 210px;
}
.layout_left,.layout_main{
   float: left;
   height: 100px;
}
.layout_left{
  width: 200px;
  margin-left: -210px;
  background: red;
}
.layout_main{
  width: 100%;
  background: #adcdef;
}
.layout_right{
  float: right;
  width:200px;
  height: 100px;
  background: #666;
  margin-right: -210px;
}

2个固定项目都在左边固定，主要内容在项目右边自适应

主要运用知识点

• 负边距 margin-left: -.....；
• 浮动 float;
• 填充 padding;
• 注意左右浮动和左右负边距

<div class="layout">
     <div class="layout_left1"></div>
     <div class="layout_left2"></div>
     <div class="layout_main"></div>
</div>

css样式

.layout:after{
   display: block;
   content: "";
   clear:both;
}
.layout{
  padding-left: 420px;
}
.layout_left1,.layout_left2,.layout_main{
  float: left;
  height: 100px;
}
.layout_left1{
   width: 200px;
   background: red;
   margin-left: -420px;
}
.layout_left2{
   width: 200px;
   margin-left: -210px;
   background: orange;
}
.layout_main{
  width: 100%;
  background: blue;
}

2个固定项目都在右边固定，主要内容在项目左边自适应

主要运用知识点

• 负边距 margin-left: -.....；
• 浮动 float;
• 填充 padding;
• 注意左右浮动和左右负边距

<div class="layout">
     <div class="layout_main"></div>
     <div class="layout_right1"></div>
     <div class="layout_right2"></div>
</div>

css样式

.layout:after{
   display: block;
   content: "";
   clear:both;
}
.layout{
  padding-right: 420px;
}
.layout_main{
  width: 100%;
  background: #eee;
  height:100px;
  float: left;
}
.layout_right1,.layout_right2{
  float: right;
  height: 100px;
  width: 200px;
}
.layout_right1{
  background: red;
  margin-right: -210px;
}
.layout_right2{
  background: blue;
  margin-right: -420px;
}