css -- 高度相等的列 -- 3列高度相等
<div class="wrapper">
<div class="box">
<h1>wo shi hao ren</h1>
<p>...</p>
<div class="bottom"></div>
</div> <div class="box">
<h1>wo shi hao ren</h1>
<p>...</p>
<div class="bottom"></div>
</div> <div class="box">
<h1>wo shi hao ren</h1>
<p>...</p>
<div class="bottom"></div>
</div>
</div>
.wrapper{
width: 100%;
overflow: hidden;
position: relative;
}
.box{
width: 250px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 520px;
margin-bottom: 500px;
margin-left: 20px;
float: left;
display: inline;
background: url(../images/a.jpg) #ccc top left no-repeat;
}
.bottom{
position: absolute;
bottom:;
height: 20px;
width: 290px;
background: url(../images/a.jpg) #ccc bottom left no-repeat;
margin-left: -20px;
}
css -- 高度相等的列 -- 3列高度相等的更多相关文章
- 关于如何解决bootstrap table 列 切换 刷新 高度不一样
在使用bootstrap table时候,碰到bootstrap table 列 切换 刷新 高度不一样的问题,如图所示: 解决这个问题很简单,在你的页头加一句<!DOCTYPE html> ...
- CSS 控制table 滑动及调整列宽等问题总结
一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的hei ...
- div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法(借鉴)
原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...
- CSS: inline-block的应用和float块高度塌陷
普通流高度塌陷: 当块float浮动时,不会对块布局产生影响,块仍然会按照左右或者上下的顺序排列.但是会影响文档的排列,当文档的高度超过块的高度时,块的高度会产生塌陷现象. 高度塌陷解决方法: ...
- css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style
css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...
- WPF设置DataGrid行内容高度自适应 与 TextBox/TextBlock内容高度自适应
WPF设置DataGrid行内容高度自适应 TextBox/TextBlock内容高度自适应 参考: DataGrid 控件中的调整大小选项: http://msdn.microsoft.com/ ...
- winform中dataGridView高度自适应填充完数据的高度
// winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度是根据数据的多少而变动. 在load的时候,数据绑定后,加上如下代码: ...
- js获取元素的滚动高度,和距离顶部的高度
jq: 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(doc ...
- 做图表统计你需要掌握SQL Server 行转列和列转行
说在前面 做一个数据统计和分析的项目,每天面对着各种数据,经过存储过程从源表计算汇总后需要写入中间结果表以提高数据使用效率,那么此时就需要用到行转列和列转行. 1.列转行 数据经过计算加工后会直接生成 ...
- oracle 行转列、列转行
最近做数据处理,经常遇到需要行转列.列转行的场景,记录个非常简单实用的oracle 列转行.行转的列方法 1.行转列,基础数据如下 做行转列处理 处理SQL select user_name,max ...
随机推荐
- 让复杂Json数据和对象自由转换 --- Gson
Gson是谷歌用于对Json操作的库,里面有着强大而又方便的功能,最常用的就是 fromJson():将json数据转化为对象: toJson():将对象转化为json数据! 对于普通的json数据使 ...
- 【processing】小代码4
translate(x,y); 移动坐标原点到x,y处 rotate(angle); 坐标沿原点顺时针转动angle度 scale(n); 绘制图像放大n倍 pushMatrix() 将当前坐标压入 ...
- 【hadoop2.6.0】数据丢失问题解决
想自己走一遍从代码到运行的流程,结果各种错,郁闷啊. 问题① http://localhost:50070/ 里面一进去就告诉我块丢了.... 解决: bin/hadoop fsck -delete ...
- 【python】编码
来源:廖雪峰 看到一篇很不错的讲python编码的文章,转过来 划重点: unicode是一种统一的编码方式,它将所有的编码方式都统一到了同一套规范中,避免了乱码问题. encode() 表示从 un ...
- 1 mysql的安装
win10 总之前期的步骤大概有:1下载安装:2 安装好后配置环境变量:3:登陆数据库 1:安装 mysql有安装版和直接解压就可以用的,据说大神都是安装的直接解压的,但鉴于自己是小白,就整了个安装版 ...
- 三、jQuery--jQuery实践--搜索框制作
input标签讲解 <input/>作为按钮的type属性:button.submit(后面会有二者对比分析)
- .net学习笔记---xml操作及读写
一.XML文件操作中与.Net中对应的类 微软的.NET框架在System.xml命名空间提供了一系列的类用于Dom的实现. 以下给出XML文档的组成部分对应.NET中的类: XML文档组成部分 对应 ...
- 【翻译一】java-并发
Lesson: Concurrency Computer users take it for granted that their systems can do more than one thing ...
- react.js基本操练
慢慢了解其它的JS前端框架... var data = [{ "when": "2 minutes ago", "who": "J ...
- DIV宽度自动缓慢变化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...