- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="Generator" content="EditPlus®">
- <meta name="Author" content="">
- <meta name="Keywords" content="">
- <meta name="Description" content="">
- <title>并列与嵌套div结构</title>
- <style type="text/CSS">
- *{
- margin:0;
- padding:0;
- }
- body{
- background:blue;
- }
- #header{
- margin:0 auto;
- height:200px;
- background:red;
- }
- #center{
- margin:0 auto;
- height:500px;
- background:yellow;
- }
- #footer{
- margin:0 auto;
- height:200px;
- background:pink;
- }
- #left #right{
- }
- #left{
- background:green;
- float:left;
- height:500px;
- width:50%;
- margin-left:0px;
- }
- #right{
- background:black;
- float:left;
- height:500px;
- width:50%;
- margin-right:0px;
- }
- </style>
- </head>
- <body>
- <div id="header">头部</div>
- <div id="center">
- <div id="left">左分栏</div>
- <div id="right">右分栏</div>
- </div>
- <div id="footer">底部</div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/0203201511812.html
来源: http://www.codesnippet.cn/detail/0203201511812.html