纯css实现两列等高
2016-02-24 13:21
447 查看
<!doctype html> <html> <head> <meta /> <title>Title</title> <style type="text/css"> *{ margin:0; padding:0;} .wrap { margin: 0 auto; width: 600px; clear: both; overflow: hidden; } .left {margin-bottom: -8000px; padding-bottom: 8000px; width: 300px; float: left; background: #f00; } .right {margin-bottom: -8000px; padding-bottom: 8000px; width: 200px; float: right; background: #0f0; } </style> </head> <body> <div class="wrap"> <div class="left"> <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p> </div> <div class="right"> <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text t text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p> </div> </div> </body> </html>
原理: 父盒子包含两个div,这两个div的不用写高度,而是都写上padding-bottom: 10000px;margin-bottom: -10000px;然后给父盒子加是overflow:hidden;如果填充这两个div,较高的那个div的高度将决定父盒子的高度。
相关文章推荐
- 细说 CSS margin
- css IE下执行的样式,其他浏览器忽略
- css之描点定位方式
- A标签样式定义
- CSS中的ul与li样式详解
- CSS3伸缩盒Flexible Box
- css实现table中td单元格鼠标悬浮时显示更多内容
- div行内样式style常用属性
- CSS 背景 background 讲解
- 引入外部css文件时最好加上type属性,否则有可能引入失败
- css背景渐变兼容(兼容所有ie)
- CSS拾遗
- css3属性 滤镜详解
- 关于错误样式遮挡点击事件问题
- #学习笔记#(44)日历翻页效果CSS3+JS
- 【CSS3】 CSS3实现“图片阴影”效果
- CSS3 弹性布局弹性流(flex-flow)属性详解和实例
- HTML+CSS慕课网学习总结(二)
- html/div+css/js/php/mysql学习笔记
- css属性选择器