div+css实现的左右两个等高div
工作当中我们经常会有这样的需求，尤其是在一些内容页面或者网站后台管理页面：左边的div的高度会随着右边的div的内容的增加儿增加，右边div的高度也会随着左边div的内容的增加而增加，也就是左右两侧两个等高的div。如果不借助JS，而是单纯的使用div+css的方法该怎么实现呢？见代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div+css实现的左右两个等高div</title>
<style>
*{
margin: 0;
paddig: 0;
}
.wrap{
width: 700px;
overflow:hidden;
margin: 0 auto;
} .left,
.right{
margin-bottom: -100000px;/*数值随便设置,越大越好,也就是(-padding-bottom值)*/
padding-bottom: 100000px;/*数值随便设置,越大越好*/
} .left{
width: 300px;
float: left;
background: yellow;
} .right{
width: 400px;
float: right;
background: green;
}
</style>
</head> <body>
<div class="wrap">
<div class="left">
left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>end</p>
</div>
<div class="right">
<p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
<p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
<p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
<p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
<p>left</p><p>
<p>right</p><p>right</p><p>right</p>
<p>end</p>
</div>
</div> </body>
</html>
div+css实现的左右两个等高div的更多相关文章
- [DIV+CSS] set the screen capture Part 1 （div截取屏幕）
使用下面的代码来获取屏幕.用DIV加CSS 来控制. 使用mousemove来获取移动的时候DIV的变化, 效果图如下: 使用5个DIV来组成实现截图目的第一部分,现在只是实现了选择的第一部分. HT ...
- 【CSS】三栏/两栏宽高自适应布局大全
页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...
- div+css经典三行两列布局
写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...
- div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法（借鉴）
原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...
- 2天驾驭DIV+CSS （技巧篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- 2天驾驭DIV+CSS （实战篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- 2天驾驭DIV+CSS （基础篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
- 用DIV+Css+Jquery 实现的旧版微信飞机大战。
用jquery 实现的旧版微信飞机大战. 以前一直都是做后台和业务逻辑,前端很少去做, 现在个小游戏. 方向键控制方向,Ctrl 键 放炸弹(当然你的有炸弹,哈哈)! 主要都是用div+Css实现的, ...
- 《Two Days DIV + CSS》读书笔记——CSS控制页面方式
1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握 ...
随机推荐
- UvaLive 6667 Longest Chain (分治求三元组LIS&树状数组)
题目链接: here 题意: 和hdu4742类似.差别就是一部分三元组是直接给出的.另一部分是用他给的那个函数生成的.还有就是这里的大于是严格的大于a>b必须ax>bx,ay>by ...
- careercup-C和C++
13.1 用C++写个方法,打印输出文件的最后K行. 解答: 一种方法是打开文件两次,第一次计算文件的行数N,第二次打开文件,跳过N-K行, 然后开始输出.如果文件很大,这种方法的时间开销会非常大. ...
- Array.prototype.slice.call(arguments) 类数组转成真正的数组
Array.prototype.slice.call(arguments) 我们知道,Array.prototype.slice.call(arguments)能将具有length属性的对象转成数 ...
- IIS 之 添加MIME扩展类型及常用的MIME类型列表
经常用IIS作为下载服务器的时候有时传上去的文件比如 example.mp4 文件名上传后,但是用http打开的时候确显示为 404 文件不存在.其实是IIS对文件的一种保护,不在IIS指定的MIME ...
- ExtJs 下拉菜单分页工具插件 代码分析
Ext.ns("Ext.ux"); //创建插件对象 Ext.ux.PageSizePlugin = function(){ //调用父对象的构造方法,并为此插件生成一个预定义st ...
- 谈谈项目中遇到的各种iOS7适配问题
由于我的项目要适配到iOS7.1, 而现在已经是9时代了,在实际工作中我也是遇到了各种奇葩的坑,所以我想尽快把遇到的iOS7适配问题和解决方案分享出来,以后这些东西可能就用处不大了. 1.字体问题 i ...
- 听说alphago又要挑战sc2了？——我眼中的人工智能
乱谈: 之前alphago进行的围棋比赛相当火爆. 一时间我的朋友圈都爆了,因为同学以及相关专业的同学都在发这个,毕竟逼格一下就起来了,我也大肆转发.各种角度,不同层次的不同深度的文章也都扫了几眼. ...
- debian 颜色设置
root@debian:/# vi /root/.bashrc #export PS1='\h:\w\$ 'export PS1='\[\033[1;32;40m\]\u@\h:\w\$ \[\033 ...
- java基础学习总结五(递归算法、冒泡排序、查看生成API)
一:递归算法 概念:自己调用自己的方法 示例代码如下: @Test /** * 递归求和 * 5+4+3+2+1=15 */ public void getSum() { long sum = sum ...
- rownum与rowId
一.RowNum Rownum是oracle生成结果集时得到的一个伪列, 按照读出行的顺序, 第一条rownum=1, 第二条=2. 对于 Oracle 的 rownum 问题,很多资料都说不支持 ...