圣杯布局和双飞翼布局
2019-04-17 本文已影响0人
小强不是蟑螂啊
1 圣杯布局
是由一个div包裹，里面分别是中左右三列，采用的是padding，margin-left,margin-right,position
<html>
<head>
<style>
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
width: 100%;
background: #f00;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
background: #ff0
}
#right {
width: 150px;
margin-right: -150px;
background: #000;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="container">
<div id="center" class="column">
I am center
</div>
<div id="left" class="column">
I am left
</div>
<div id="right" class="column">
I am right
</div>
</div>
<div id="footer"></div>
</body>
<script>
</script>
</html>
2 双飞翼布局
采用的是居中的用div包裹，中间的设置margin，然后还是设置maring-left
<html>
<head>
<style>
#container {
width:100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
background: #f00;
}
#left {
width: 200px;
background: #ff0;
margin-left: -100%;
}
#right {
width: 150px;
background: #000;
margin-left: -150px;
}
</style>
</head>
<body>
<div id="container" class="column">
<div id="center">
I am center
</div>
</div>
<div id="left" class="column">
I am left
</div>
<div id="right" class="column">
I am right
</div>
</body>
<script>
</script>
</html>
