<!DOCTYPE?HTML>?
<html>
<head>
<meta?charset="utf-8">
<title>橫向布局</title>
<style?type="text/css">
*{margin:?0;padding:?0;}
#wrap{background:#00c;width:800px;margin:0?auto;}
#header{background:red;width:?50%;}
#mainbody{background:#fc0;width:?50%;?overflow:?hidden;}
.left{width:?800px;height:?200px?;background:#fff;float:?left;
margin-right:?20px;}
.right{width:?140px;height:?500px?;background:green;float:?right;}
#footer{background:#639;width:?50%;}
</style>
</head>??
<body>
<div?id="wrap?"></div>
<div?id="header">頭部</div>
<div?id="mainbody">xcvxcv
<div?class="left"></div>
<div?class="right"></div>
</div>
<div?id="footer">版權(quán)</div>
</body>?
</html>
2017-05-08
wrap 要嵌套在整個(gè)頁(yè)面中
<body>
????<div?id="wrap?">
????<div?id="header">頭部</div>
????<div?id="mainbody">xcvxcv
????<div?class="left"></div>
????<div?class="right"></div>
????</div>
????<div?id="footer">版權(quán)</div>
</div>
</body>?