ch8 高度相等的列--CSS方法
如下图所示效果,可以使用表格实现,本文采用在CSS中实现。
标记如下:
<div class="wrapper">
<div class="box">
<h1>Andy Budd</h1>
<p> ... </p>
<div class="bottom"></div>
</div>
<div class="box">
<h1>Richard Rutter</h1>
<p> ... </p>
<div class="bottom"></div>
</div>
<div class="box">
<h1>Jeremy Keith</h1>
<p> ... </p>
<div class="bottom"></div>
</div>
</div>
在实例中,有3个div,每列一个div,每个div中包括标题、内容、空的div,这个空的div作为底角的钩子,将这3个div放入容器div中,使用容器div限制高度,下述代码给框设置样式:
.wrapper {
width: 100%;
}
.box {
width: 250px;
margin-left: 20px;
float: left;
display: inline;
padding: 20px;
background: #89ac10 url(chapter08/img/top.gif) no-repeat left top; /*图片使得上面两个角成为圆角*/
}
运行结果如下:产生3个高度不一致的列
产生高度相等的三列的关键技术在于:给每个框设置大的底内边距(220px),然后用数值相似的负外边距(-200px)来消除这个高度。
.wrapper {
float: left;
border: solid 1px black;
width: 100%;
}
.box {
width: 250px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 220px;
margin-bottom: -200px;
margin-left: 20px;
float: left;
display: inline;
background: #89ac10 url(chapter08/img/top.gif) no-repeat left top;
}
通过给容器浮动、添加边框,可以看到这样导致每个列溢出容器元素。
.wrapper {
border: solid 1px black;
width: 100%;
overflow:hiddden;
}
.box {
width: 250px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 220px;
margin-bottom: -200px;
margin-left: 20px;
float: left;
display: inline;
background: #89ac10 url(chapter08/img/top.gif) no-repeat left top;
}
如果把容器的overflow设置为hidden,列在最高点被剪裁,220px和-200px形成的20px的差值在每个框的底部形成可见的内边距。
下面把列的底边定位在正确的位置,需要它们与容器的底部对齐:为此,把容器的position设置为relative,然后将空div的position设置为absolute,再将它们的bottom设置为0,只要给它们设置正确的宽高,就能应用底部背景图像。
.wrapper {
border: solid 1px black;
width: 100%;
overflow:hiddden;
position: relative;
}
.box {
width: 250px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 220px;
margin-bottom: -200px;
margin-left: 20px;
float: left;
display: inline;
background: #89ac10 url(chapter08/img/top.gif) no-repeat left top;
}
.bottom {
position: absolute;
bottom:;
height: 20px;
width: 290px;
background: #89ac10 url(chapter08/img/bottom.gif) no-repeat left bottom;
margin-left: -20px;/*因为在.box中设置了margin-left为20px,则.bottom向右移动了20px(如最后一图),所以设置-20px让它左移*/
}
ch8 高度相等的列--CSS方法的更多相关文章
- CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...
- 子元素浮动父容器高度不能自适应的CSS解决方法
百度标题:子元素浮动父容器高度不能自适应的CSS解决方法 从第二份工作开始,已经不怎么写样式了,然后就忘记了一部分,有的也生疏了. 今天碰到子元素意外挤到一起的问题,就问公司前端工程师是怎么回事,F1 ...
- JQUERY操作css与css()方法、获取设置尺寸;
一.jQuery addClass() 方法 向不同的元素添加 class 属性.在添加类时,您也可以选取多个元素 <style> .aa { color:red; }; </sty ...
- html 关于内部是float元素的外部div高度为0的解决方法!
最近编写一个页面的时候遇见一个问题,外部div是block的,而内部元素是float的,大家应该都知道float的元素是没有实际高度的,就算你设置了float元素的高度他也不会撑开外部block元素的 ...
- jQuery HTML CSS 方法
jQuery HTML / CSS 方法 下面的表格列出了所有用于处理 HTML 和 CSS 的 jQuery 方法. 下面的方法适用于 HTML 和 XML 文档.除了:html() 方法. 方法 ...
- li浮动引起ul高度坍陷的解决方法
我们都知道float在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.元素浮动之后,它脱离当前正常的文档流,所以无法撑开其父元素,造成父元素的高度塌陷.如下的代码就 ...
- jQuery 学习03——HTML:捕获、设置、添加元素、删除元素、CSS类、CSS()方法、尺寸
jQuery - 获取内容text().html() 以及 val()和属性attr() jQuery 中非常重要的部分,就是操作 DOM 的能力. DOM = Document Object Mod ...
- Oracle 多行变一列的方法
多行变一列的方法有很多,觉得这个第一眼看懂了当时就用的这个办法. 情况是这样的.以下数据前几列是一样的,需要把VAT_VALUE_CHAR 的值放在同一行上. SELECT * FROM ps_vat ...
- [转]javascript 快速隐藏/显示万行表格列的方法
原文地址:javascript 快速隐藏/显示万行表格列的方法 隐藏表格列,最常见的是如下方式: td.style.display = "none"; 这种方式的效率极低.例如,隐 ...
随机推荐
- java中使用静态字段和构造函数跟踪某个类所创建对象的个数
对于这个问题,我们都知道java中使用类时会自动调用构造函数.按照这个思路我们可以定义一个static int 形的常量count 然后将count++放入这个类的构造函数中,这样只要输出count的 ...
- FTP-Publisher Plugin
使用 FTP-Publisher Plugin 在 http://wiki.hudson-ci.org/display/HUDSON/FTP-Publisher+Plugin 有详细说明, 需要注意的 ...
- 「JSOI2011」柠檬
「JSOI2011」柠檬 传送门 斜率优化题. 在优化前,还有一个值得一提的优化: 对于最后的最优分割方案,每一段的两个端点一定是同颜色的,并且作为这一段的 \(s_0\) 证明:如果不作为这一段的 ...
- flask-script扩展
在项目部署到线上时,指定端口号时,一般都不会在服务器上进行更改,所以使用flask-script就可以在Flask服务器启动时,通过命令行的方式传入参数,而不仅仅通过app.run()方法中传参.具体 ...
- js判断对象中是否存在某一项和判断是否是对象
1.判断是否为对象 let str = { name: '第一', age: 12 } console.log(typeof str== "object") 2.判断对象中是否有某 ...
- Java中短路
当使用逻辑运算符时,我们会遇到一种“短路”的现象.即一旦能够准确无误的确定整个表达式的值,就不再计算表达式余下的部分了.因此整个表达式靠后的部分有可能不被运算 /**短路 * @param args ...
- 最简单、最常用的一些Git命令
---------------------------------------------------------------------------------------------------- ...
- 【原】Web Polygraph 安装
1.下载 # wget http://www.web-polygraph.org/downloads/srcs/polygraph-4.3.2-src.tgz 2.解压 # tar zxvf poly ...
- 计划任务之一次性计划任务(at)和周期性计划任务(crontab)(重点)
一:知识要点 ----计划任务的意义----计划任务分类----用户计划任务crontab----系统计划任务----计划任务使用注意事项----anacron服务介绍 二:计划任务的意义计划任务 - ...
- 用instsrv.exe+srvany.exe将应用程序安装为windows服务
下载 链接:https://pan.baidu.com/s/1gKu_WwVo-TeWXmrGAr9qjw 提取码:s1vm 用instsrv.exe安装srvany.exe 将instsrv.exe ...