DIV+CSS 三栏布局实例代码

设计元素重构：三栏目布局的解读与理解

==========================

设想这样一个场景：三栏目布局如上图所示，其中核心的MAIN区域自适应浏览器宽度，而LEFT和RIGHT两个区域则固定宽度为200PX。这是一个常见且实用的网页布局设计。

一、布局代码

这是基本的CSS样式代码：

`.right, .left { height: 300px; width: 200px; }`

`.right { float: right; background: 000000; }`

`.left { float: left; background: 009933; }`

`.main { background: F60; height: 300px; }`

以及对应的HTML结构：

`

`

`

二、设计核心解读

原代码：

```html

```

```html