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 你必须掌握 ...
随机推荐
- perl dtrace2
http://search.cpan.org/~chrisa/Devel-DTrace-Provider-1.11/lib/Devel/DTrace/Provider.pm
- Locally Weighted Regression
简单回顾一下线性回归.我们使用了如下变量:\(x\)—输入变量/特征:\(y\)—目标变量:\((x,y)\)—单个训练样本:\(m\)—训练集中的样本数目:\(n\)—特征维度:\((x^{(i)} ...
- c#_delegate_异步调用_BeginInvoke
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- TOP30专访：捕鱼达人陈昊芝
原文:http://www.csdn.net/article/2012-04-04/313919/1 编者按:3月31日,第四届CocoaChina游戏开发者大会暨Cocos2D-X技术研讨会在北京举 ...
- 多线程NSOperation
NSOperation(经常使用): 1.为什么会有NSOperation?弥补gcd的一些问题:1)下载为例子:如果gcd放到队列中的block操作面对网络有问题,block之外无法取消bloc ...
- Java中double类型数据的精度问题
今天在写段代码模拟计算器的时候,偶然发现,当我进行小数运算的时候,竟然出现了令我惊讶的结果,后来问了问度娘,才晓得,原来这里面还有点知识呢,下面是介绍: 你猜下面几句的结果是多少? public cl ...
- mapping 详解2（field datatypes）
基本类型 1. 字符串 字符串类型被分为两种情况:full-text 和 keywords. full-text 表示字段内容会被分析,而 keywords 表示字段值只能作为一个精确值查询. 参数: ...
- 关于JFace中的TableViewer和TreeViewer中的
TableViewer类 构造方法摘要: 方法摘要: 在做的这几个练习中,发现,getTable(),refresh(),remove(),setSelection()方法经常使用. TreeView ...
- cell函数总结
元胞数组: 元胞数组是MATLAB的一种特殊数据类型,可以将元胞数组看做一种无所不包的通用矩阵,或者叫做广义矩阵.组成元胞数组的元素可以是任何一种数据类型的常数或者常量,每一个元素也可以具有不同的尺寸 ...
- Ubuntu lnmp安装记录
参考了: Ubuntu 14.04 LTS 安装 LNMP Nginx\PHP5 (PHP-FPM)\MySQL 在访问 info.php的时候,我显示的是502错误.后面我参考了: Ubuntu15 ...