常见的CSS布局

作者: l_meng | 来源:发表于2017-03-19 23:22 被阅读0次

css
CSS布局
CSS布局
CSS布局
css笔记-1/css的学习思路
CSS经典布局
BFC原理和作用
【CSS】 Index
CSS实现三栏布局
【CSS】三、常见属性

1.单列布局：http://js.jirengu.com/casulimege/3/
2.双列布局
3.普通三列布局： http://js.jirengu.com/ficikacipi/3
3.圣杯布局： http://js.jirengu.com/talunasaca/3
是一种三列布局，两边宽度固定，中间宽度自适应。注意中间一块dom元素需写在最前

</head>
<body>
  <div class= content>
    <div class= main>main</div>
    <div class= aside>aside</div>
    <div class= extra>extra</div>
  </div>
</body>

.content{
  padding-left: 90px;
  padding-right: 90px;
}
.main{ 
  width: 100%;
  height: 500px;
  float: left;
}
.aside{
  float: left;
  width: 80px;
  height: 400px;
  margin-left: -100%;
  position: relative;
  left: -90px;
}
.extra{
  float: left;
  width: 80px;
  height: 400px;
  margin-left: -80px;
  position: relative;
  left: 90px;
}
/*给content设置内边距留出左右两栏的位置，然后利用相对定位不影响其他元素的特性，移动左右两栏到指定位置。*/

4.双飞翼布局： http://js.jirengu.com/hilogeyeba/2
与圣杯布局类似，但方法是在main中添加新div class=child，再给child设置左、右外边距，以隔开aside和extra

<body>
  <div class= content>
    <div class= main>
      <div class= child>main</div>
    </div>
    <div class= aside>aside</div>
    <div class= extra>extra</div>
  </div>
</body>

.child{
  height: 500px;
  background: orange;
  margin-left: 90px;
  margin-right: 90px;
}
.main{
  width: 100%;
  float: left;
}
.aside{
  float: left;
  width: 80px;
  height: 400px;
  background: yellow;
  margin-left: -100%;
}
.extra{
  float: left;
  width: 80px;
  height: 400px;
  background: pink;
  margin-left: -80px;
}

/*main的宽度仍然是content宽度的100%，但中间栏的内容其实是由child显示的。利用给child设置左右外边距的方法隔开左右栏。*/