HTML和CSS經典布局6 - leotsai @ IT工程師數位筆記本

文章出處

如下圖：

需求：

1. 如圖

2. 可以從任意div標簽開始。

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style>
 6         #content {
 7             overflow: hidden;
 8         }
 9         .column-left {
10             float: left;
11             width: 200px;
12             min-height: 500px;
13         }
14         .column-right {
15             margin-left: 220px;
16             min-height: 500px;
17         }
18         .columns3 {
19             overflow: hidden;
20         }
21         .columns3 > div {
22             width: 33.33333%;
23             float: left;
24         }
25             .columns3 .column-content {
26                 margin-right: 20px;
27                 min-height: 300px;
28                 background-color: greenyellow;
29             }
30     </style>
31 </head>
32 <body>
33     <div id="header" style="height: 50px; background: blue;">
34         
35     </div>
36     <div id="content">
37         <div class="column-left" style="background-color: yellow;">
38             
39         </div>
40         <div class="column-right">
41             <div class="columns3">
42                 <div>
43                     <div class="column-content"></div>
44                 </div>
45                 <div>
46                     <div class="column-content"></div>
47                 </div>
48                 <div>
49                     <div class="column-content"></div>
50                 </div>
51             </div>
52         </div>
53     </div>
54 </body>
55 </html>