一：两列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*初始化页面样式*/
body{margin: 0;padding: 0;color: #fff}
/*最外层div*/
.container{ 90%; height: 1000px; margin: 0 auto; /* 左右居中 */}
.left{ 60%;height: 1000px;background-color: #1a5acd; float: left /* 左浮动 */}
.right{ 40%;height: 1000px;background-color: #5880f9; float: right /* 右浮动 */}
</style>
</head>
<body>
<div class="container">
<div class="left">页面左侧</div>
<div class="right">页面右侧</div>
</div>
</body>
</html>
二：三列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*初始化页面样式*/
body{margin: 0;padding: 0;color: #fff}
/*最外层div*/
.container{ 90%; height: 1000px; margin: 0 auto; /* 左右居中 */}
.left{ 30%;height: 1000px;background-color: #1a5acd; float: left /* 左浮动 */}
.middle{ 50%;height: 1000px;background-color: #5880f9; float: left /* 左浮动，在左边浮动后面 */}
.right{ 20%;height: 1000px;background-color: #1a5acd; float: right /* 右浮动 */}
</style>
</head>
<body>
<div class="container">
<div class="left">页面左侧</div>
<div class="middle">页面中间</div>
<div class="right">页面右侧</div>
</div>
</body>
</html>