圣杯布局
2017-11-01 本文已影响13人
哼_
这是是错误的
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0; padding:0;}
.main,.left,.right { float:left; height:200px; }
.main { width:100%; background:#ace; }
.left { width:20%; background:#eee; margin-left:-100%; }
.right { width:30%; background:#ddd; margin-left:-30%; }
.mainln{margin:0 30% 0 20%;}
</style>
</head>
<body>
<div class="wrap">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">
<div class="mainln">
right
</div>
</div>
</div>
</body>
</html>
这是正确的--以下
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0; padding:0;}
.main,.left,.right { float:left; height:200px; }
.main { width:100%; background:#ace; }
.left { width:20%; background:#eee; margin-left:-100%; }
.right { width:30%; background:#ddd; margin-left:-30%; }
.mainln{margin:0 30% 0 20%;}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div class="mainln">
main
</div>
</div>
<div class="left">left</div>
<div class="right">
right
</div>
</div>
</body>
</html>
