学习手机页面制作3
2015-02-10 23:43
211 查看
手机页面制作3
利用上节说的box-sizing解决流式布局的一个问题
一个流式布局的代码 左右的width+border>100% 所以盒子会掉下去
效果图
使用box-sizing 后
显示效果图 发现对齐了。
利用上节说的box-sizing解决流式布局的一个问题
一个流式布局的代码 左右的width+border>100% 所以盒子会掉下去
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width:100%; height:300px; background: #fec; } #left{ width:50%; height:200px; float:left; border:1px solid #f00; background: orange; } #right{ width:50%; height:200px; float:left; border: 1px solid #f00; background: blue; } </style> </head> <body> <div id="box"> <div id="left"></div> <div id="right"></div> </div> </body> </html>
效果图
使用box-sizing 后
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width:100%; height:300px; background: #fec; } #left{ width:50%; height:200px; float:left; border:1px solid #f00; background: orange; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #right{ width:50%; height:200px; float:left; border: 1px solid #f00; background: blue; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } </style> </head> <body> <div id="box"> <div id="left"></div> <div id="right"></div> </div> </body> </html>
显示效果图 发现对齐了。
相关文章推荐
- 学习手机页面制作5
- 学习制作手机页面2
- 学习手机页面制作4
- android学习三 手机页面的转换
- 制作手机页面攻略 --- viewport元数据使用
- OAF学习笔记-20-在系统页面制作Tab页(系统中有Tab页,自己增加Tab)
- ROS 学习系列 -- Roomba, Xtion Pro机器人制作地图在Android手机无法实时观测地图
- 手机网站页面制作更应当符合WEB尺度
- OAF学习笔记-20-在系统页面制作Tab页(系统中有Tab页,自己增加Tab)
- 学习制作手机网站1
- OAF学习笔记-20-在系统页面制作Tab页(系统中有Tab页,自己增加Tab)
- 移动开发:学习手机网站设计和制作的25个优秀案例
- 手机网站页面制作更应该符合WEB标准
- 学习如何制作 404 错误页面的15个最佳案例
- 不用修改任何核心文件,实现dede模板pc和手机访问的页面制作教程
- javascript 客户端验证和页面特效制作 学习笔记
- 手机web页面制作时的注意事项
- 制作手机页面过程中遇到的一点问题
- 前端学习笔记之页面制作(一)——PS切图
- OAF学习笔记-20-在系统页面制作Tab页(系统中有Tab页,自己增加Tab)