div+css实现两列布局实例

248 查看

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列布局实例</title>
<style>
.mainBox{
width: 960px;
height: 300px;
background: #cff;
margin: 0 auto;
}
.leftBox{
width: 740px;
height: 300px;
background:#C9F;
float: left;
margin-right: 10px;
}
.rightBox{
width: 210px;
height: 300px;
background: #fcf;
float: left;
}
</style>
</head>
<body>
<div class="mainBox">
<div class="leftBox"></div>
<div class="rightBox"></div>
</div>
</body>
</html>