css3聖盃和雙飛翼佈局
阿新 • • 發佈：2019-01-03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
/*聖盃佈局*/
/*.a{
padding: 0 200px 0 200px;
}
.left,.right,.main{float: left;}
.left{
width: 200px;height: 200px;
background: red;
margin-left: -100%;
position: relative;
left: -200px;
}
.main{
width: 100%;height: 200px;
background: yellow;
position: relative;
}
.right{
width: 200px;height: 200px;
background: pink;
margin-left: -200px;
position: relative;
right: -200px;}*/
/*雙飛翼佈局*/
.left,.right,.main{
float: left;
}
.left{
background: green;
width: 200px;height: 200px;
margin-left: -100%;
}
.right{
width: 200px;height: 200px;
background: red;
margin-left: -200px;
}
.main{
width:100%;height: 200px;
background: yellow;
}
.c{
margin: 0 200px 0 200px;
}
</style>
</head>
<body>
<!-- <div class="a">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div> -->
<div class="b">
<div class="main">
<div class="c">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
/*聖盃佈局*/
/*.a{
padding: 0 200px 0 200px;
}
.left,.right,.main{float: left;}
.left{
width: 200px;height: 200px;
background: red;
margin-left: -100%;
position: relative;
left: -200px;
}
.main{
width: 100%;height: 200px;
background: yellow;
position: relative;
}
.right{
width: 200px;height: 200px;
background: pink;
margin-left: -200px;
position: relative;
right: -200px;}*/
/*雙飛翼佈局*/
.left,.right,.main{
float: left;
}
.left{
background: green;
width: 200px;height: 200px;
margin-left: -100%;
}
.right{
width: 200px;height: 200px;
background: red;
margin-left: -200px;
}
.main{
width:100%;height: 200px;
background: yellow;
}
.c{
margin: 0 200px 0 200px;
}
</style>
</head>
<body>
<!-- <div class="a">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div> -->
<div class="b">
<div class="main">
<div class="c">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>