<!DOCTYPE html>
<html>
<head>
<title>layout</title>
<style type="text/css">
html,body{
margin: 0;
padding: 0;
height: 100%;
}
/*圣杯布局*/
.main{
height: 300px;
padding: 0 300px 0 300px;
}
.main .box{
float: left;
}
.main .mid{
width: 100%;
height: 100%;
background-color: black;
}
.main .left{
position: relative;
width: 300px;
height: 100%;
margin-left: -100%;
left: -300px;
background-color: yellow;
}
.main .right{
position: relative;
width: 300px;
height: 100%;
margin-left: -300px;
right: -300px;
background-color: yellow;
}
.sfy{
width: 100%;
height: 300px;
}
/*双飞翼布局*/
.box{
float: left;
}
.mid-box{
width: 100%;
height: 100%;
}
.mid-box .mid{
margin: 0 300px 0 300px;
height: 100%;
background-color: black;
}
.sfy .left{
width: 300px;
height: 100%;
margin-left: -100%;
background-color: yellow;
}
.sfy .right{
width: 300px;
height: 100%;
margin-left: -300px;
background-color: yellow;
}
/*flexbox布局*/
.flex{
display: flex;
height: 300px;
}
.flex .mid{
order: 1;
height: 300px;
flex: 1 1 auto;
background-color: black;
}
.flex .left{
order: 0;
height: 300px;
flex: 0 1 300px;
background-color: yellow;
}
.flex .right{
order: 2;
height: 300px;
flex: 0 1 300px;
background-color: yellow;
}
/* 绝对定位加margin */
.abso{
width: 100%;
height: 300px;
position: relative;
}
.abso .mid{
margin: 0 300px 0 300px;
background-color: black;
height: 300px;
}
.abso .left{
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 300px;
background-color: yellow;
}
.abso .right{
position: absolute;
right: 0;
top: 0;
width: 300px;
height: 300px;
background-color: yellow;
}
/*浮动加margin,mid项要放在左右的后面*/
.float{
width: 100%;
height: 300px;
}
.float .mid{
margin: 0 300px 0 300px;
background-color: black;
height: 300px;
}
.float .left{
float: left;
width: 300px;
height: 300px;
background-color: yellow;
}
.float .right{
float: right;
width: 300px;
height: 300px;
background-color: yellow;
}
/*使用inline-block布局*/
.ib{
width: 100%;
height: 300px;
font-size: 0;
}
.ib .left{
display: inline-block;
width: 300px;
height: 300px;
background-color: yellow;
}
.ib .mid{
display: inline-block;
width: calc(100% - 600px);
height: 300px;
background-color: black;
}
.ib .right{
display: inline-block;
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="main">
<div class="box mid"></div>
<div class="box left">left</div>
<div class="box right">right</div>
</div>
<hr><hr>
<div class="sfy">
<div class="box mid-box">
<div class="mid">mid</div>
</div>
<div class="box left">left</div>
<div class="box right">right</div>
</div>
<hr><hr>
<div class="flex">
<div class="mid"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<hr><hr>
<div class="abso">
<div class="mid"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<hr><hr>
<div class="float">
<div class="left"></div>
<div class="right"></div>
<div class="mid"></div>
</div>
<hr><hr>
<div class="ib">
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>
</div>
</body>
</html>
六种三栏式布局
最新推荐文章于 2024-07-13 10:04:53 发布