工作当中我们经常会有这样的需求，尤其是在一些内容页面或者网站后台管理页面：左边的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的更多相关文章

  1. [DIV+CSS] set the screen capture Part 1 （div截取屏幕）

    使用下面的代码来获取屏幕.用DIV加CSS 来控制. 使用mousemove来获取移动的时候DIV的变化, 效果图如下: 使用5个DIV来组成实现截图目的第一部分,现在只是实现了选择的第一部分. HT ...

  2. 【CSS】三栏/两栏宽高自适应布局大全

    页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...

  3. div+css经典三行两列布局

    写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...

  4. div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法（借鉴）

    原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...

  5. 2天驾驭DIV+CSS （技巧篇）（转）

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  6. 2天驾驭DIV+CSS （实战篇）（转）

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  7. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  8. 用DIV+Css+Jquery 实现的旧版微信飞机大战。

    用jquery 实现的旧版微信飞机大战. 以前一直都是做后台和业务逻辑,前端很少去做, 现在个小游戏. 方向键控制方向,Ctrl 键 放炸弹(当然你的有炸弹,哈哈)! 主要都是用div+Css实现的, ...

  9. 《Two Days DIV + CSS》读书笔记——CSS控制页面方式

    1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握 ...

随机推荐

  1. android学习日记03--常用控件ListView

    常用控件 8.ListView 列表视图,比如游戏的排行榜.列表数据可以根据屏幕大小自适应 列表的显示需要三个元素: a.ListVeiw:用来展示列表的View. b.适配器:用来把数据映射到Lis ...

  2. IE jquery mouseenter，mouseover超奇葩问题

    做了个项目,结构很简单 <div class="index-main" data-url="./img/index_default.jpg"> &l ...

  3. 转--23种设计模式的搞笑解释(后续放逐一C++解释版本)

    创建型模式 1.FACTORY —追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说“来四个鸡翅”就行了.麦当劳和肯德 ...

  4. 一个.Net程序员：既然选择了编程，只管风雨兼程（转）

    一个.Net程序员:既然选择了编程,只管风雨兼程 一次会议记录是不会有人感兴趣的,做标题党也是不道德的.所以,走了个折衷的路线,标题不叫会议记录, 内容不纯总结,技术加吐槽,经验加总结. 对于一个程序 ...

  5. C#_Ajax分页MVCPager

    UCJqOrderList @model PagedList<Order> <div id="dvOrders"> <table width=&quo ...

  6. Folder and jar

  7. Oracle取得中文拼音首字母函数

    CREATE ) ; V_RETURN ) ; FUNCTION F_NLSSORT (P_WORD IN VARCHAR2) RETURN VARCHAR2 AS BEGIN RETURN NLSS ...

  8. opencv里面CV_32FC1家族

    因为总是接触过这样一些#define里面的东西但是总也不知道是干什么用的.而且每看一次梦比一次. 对于这些东西到底是什么的简写根本就不能理解. 原意是跑一下这个例程的: cvRectangle( my ...

  9. linux系统安装(虚拟机以及linux的下载与安装)

    最近开始研究linux系统,以前接触linux系统只是一些简单的命令,例如: pwd:查看当前目录   ls:遍历目录    cd :在目录之间切换等. linux系统是基于unix系统开发的,是一个 ...

  10. otf字体转ttf字体

    可以使用Font creator进行转换字体. 绿色版下载链接 Font Creator(字体编辑软件下载)V9.0官方版 或者我的百度云:http://pan.baidu.com/s/1c1jjfm ...