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 ...
随机推荐
- ios 中直接修改frame里边某个属性的简便方法
参考:http://www.cnblogs.com/wengzilin/p/4359865.html 在iOS中view的frame属性使用地太频繁了,尤其是调UI的时候.我们知道,正常情况下我们无法 ...
- Eval绑定日期时,修改日期显示的格式
我们使用DataList绑定数据的时候,需要将日期的格式做一个修改,比如绑定出来的日期格式是:“2015/8/12 0:0:0”,我们需要修改为“2015-8-12”,代码如下: <%#Eval ...
- js方法类库封装的简易示例
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></s ...
- jquery获得select option的值 和对select option的操作
jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Se ...
- cocospod 安装和使用 podfile 问题解决
Podfile 不识别 usr_framework!,系本地Pods版本太低,要在0.36以上. 以下转自:http://blog.csdn.net/eqera/article/details/393 ...
- C语言文件操作相关函数
在实际应用中,我们往往需要对文件进行操作,下面我将介绍C语言的一些关于操作文件的函数. 一.计算机文件 计算机文件是以计算机硬盘为载体存储在计算机上的信息集合,是存储在某种长期储存设备上的一段数据流. ...
- 网络中文乱码问题 utf-8
// 网络中文乱码问题 utf-8 [string stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
- Android Tab -- 使用ViewPager、PagerAdapter来实现
原文地址:http://blog.csdn.net/crazy1235/article/details/42678877 效果:滑动切换,自动切换. 代码:https://github.com/ldb ...
- EChart使用简单介绍
Echart是百度研发团队开发的一款报表视图JS插件,功能十分强大,使用内容做简单记录:(EChart下载地址 http://echarts.baidu.com/download.html) 1.ti ...
- Jquery easy UI 上中下三栏布局 分类: ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...