常见的CSS布局
2017-03-19 本文已影响0人
l_meng
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设置左右外边距的方法隔开左右栏。*/
