HTML和CSS经典布局4
2013-11-12 16:26
411 查看
如下图:
View Code
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> #content { overflow: hidden; } .column-left { float: left; width: 200px; min-height: 500px; } .column-right { float: right; width: 200px; min-height: 500px; } .column-middle { margin: 25px 225px; min-height: 500px; } </style> </head> <body> <div id="header" style="height: 50px; background: blue;"> </div> <div id="content"> <div class="column-left" style="background-color: purple;"> </div> <div class="column-right" style="background-color: yellow;"> </div> <div class="column-middle" style="background-color: pink;"> </div> </div> </body> </html>
View Code
相关文章推荐
- HTML和CSS经典布局1
- HTML和CSS经典布局2
- HTML和CSS经典布局3
- HTML和CSS经典布局5
- HTML和CSS经典布局6
- 利用HTML和CSS实现常见的布局
- CSS + DIV 经典布局,DIV统一自适应高度
- html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签(转)
- Photoshop图象切片保存为网页HTML(DIV+CSS布局)的方法
- HTML CSS + DIV实现局部布局
- html+css关于位置布局
- HTML-div+ul+li经典布局案例
- CSS 布局经典问题初步整理
- [CSS]HTML前端设计中的布局问题
- CSS 布局经典问题初步整理
- HTML/CSS学习之 三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
- 快速学习html、css的经典笔记
- Html+CSS_居中布局的总结
- 【前端开发】负值之美:负值在页面布局中的应用(CSS HTML)