HTML和CSS经典布局4

如下图：

需求：

1. 如图

2. 可以从body标签开始。

 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             float: right;
16             width: 200px;
17             min-height: 500px;
18         }
19         .column-middle {
20             margin: 25px 225px;
21             min-height: 500px;
22         }
23     </style>
24 </head>
25 <body>
26     <div id="header" style="height: 50px; background: blue;">
27         
28     </div>
29     <div id="content">
30         <div class="column-left" style="background-color: purple;">
31             
32         </div>
33         <div class="column-right" style="background-color: yellow;">
34             
35         </div>
36         <div class="column-middle" style="background-color: pink;">
37             
38         </div>
39     </div>
40 </body>
41 </html>

View Code

相关阅读:
ftp的基本工作原理
ubuntu自带输入法ibus 无法按数字键取词
C语言教程
【数据结构】---线性表
python搭建opencv
第六届Code+程序设计网络挑战赛
整除分块
ac自动机
算法梳理 (CSP 2019
lougu main page

原文地址：https://www.cnblogs.com/leotsai/p/html-css-classical-layout-design-4.html