2、两列布局：说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。
3、三列布局：两侧定宽中间自适应,首先设置父级元素的宽度，可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动，设置margin，调整间距。同样注意清除浮动的影响。
4、混合布局：在一列布局的基础上，保留top和foot部分，将中间的main部分改造成两列或三列布局，小的模块可以再逐级同理划分。
<!DOCTYPE html>2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/htmlcharset=utf-8"/>
5 <title>网页布局练习</title>
6
7 <link href="../EX_Asp_Net/css/div.css" rel="stylesheet" />
8 </head>
9 <body>
10 <h1 align="center">利用div和css对页面的布局进行调整</h1><hr />
11 <div class="d1">
12 <h3>窗口1</h3>
13 </div>
14 <div class="d2"><h3>窗口2</h3></div>
15 <div class="d3"><h3>窗口3</h3></div>
16 </body>
17 </html>
1
2
3
4
css代码：
1 bod {
2 margin:100%
3 padding:100%
4
5 }
6 .d1{
7 width:200px
8 height:600px
9 background-color:red
10 margin-left:20px
11 margin-top:20px
12 position:absolute
13 }
14 .d2{
15 width:800px
16 height:150px
17 background-color:greenyellow
18 position:absolute
19 left:235px
20 margin-top:20px
21
22 }
23 .d3{
24 width:800px
25 heigh
