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 你必须掌握 ...
随机推荐
- 手把手教你Android来去电通话自动录音的方法
我们在使用Android手机打电话时,有时可能会需要对来去电通话自动录音,本文就详细讲解实现Android来去电通话自动录音的方法,大家按照文中的方法编写程序就可以完成此功能. 来去电自动录音的关键在 ...
- IOS debug网络PonyDebugger 实践篇
引言: PonyDebugger是一个很给力的iOS调试工具,它的监视器安装在Chrome浏览器下做为插件使用,通过监视器和PonyDebugger的iOS SDK相辅相成,可以很好的监视App的运 ...
- Oracle DB 执行表空间时间点恢复
• 列出在执行表空间时间点恢复(TSPITR) 时会发生的操作 • 阐释TSPITR 使用的术语的定义 • 确定适合将TSPITR 用作解决方案的情况 • 确定时间点恢复的正确目标时间 • 确定不能使 ...
- java推断字符串是否为乱码
项目中有一个功能 在IE中GET方式提交会产生乱码 但有两个入口都会走这同一段代码 固不能直接转码,所以要进行推断传过来的该值是不是乱码 可用下面方式验证: java.nio.charset.Char ...
- Vmware中为Mac Os安装vmtools
成功方法: 1. 在VMWare中点击edit this virtual machine 2. 添加CD/DVD,使用iso,找到那个darwin.iso 3. 在setting里面,点击CD/DVD ...
- java_spring_bean的作用域_实例是否为单实例
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- Arcengine10下载地址
ed2k://|file|%5BArcGIS.Engine.Developer.kit.10.%E8%8B%B1%E6%96%87%E7%89%88%5D.ArcGIS.Engine.Develope ...
- modelsim 仿真时出现无限迭代（iteration reach limitation）的原因及其解决办法
modelsim 仿真时出现无限迭代(iteration reach limitation) 出现这种故障的原因: 一般都是代码里出现的组合逻辑无限循环或者组合逻辑A产生signal_A,signa ...
- JSON数据理解
话说JSON数据平常用的确实挺多的,但是基本上只知道怎么用,对其一些细节并没有整理过,今儿趁着下午有点空,坐下来,学习整理下,并分享出来. 对于JSON,首先它只是一种数据格式,并非一种语言,虽然和j ...
- 解决IllegalStateException: Can not perform this action after onSaveInstanceState：
今天做项目中的支付宝功能,是在fragment中做的,在支付成功后,想切换到支付成功的页面. 结果就报错了IllegalStateException: Can not perform this act ...