工作当中我们经常会有这样的需求，尤其是在一些内容页面或者网站后台管理页面：左边的div的高度会随着右边的div的内容的增加儿增加，右边div的高度也会随着左边div的内容的增加而增加，也就是左右两侧两个等高的div。如果不借助JS，而是单纯的使用div+css的方法该怎么实现呢？见代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>div+css实现的左右两个等高div</title>
  6. <style>
  7. *{
  8.     margin: 0;
  9.     paddig: 0;
  10. }
  11. .wrap{
  12.     width: 700px;
  13.     overflow:hidden;
  14.     margin: 0 auto;
  15. }
  16.  
  17. .left,
    .right{
  18.     margin-bottom: -100000px;/*数值随便设置,越大越好,也就是(-padding-bottom值)*/
  19.     padding-bottom: 100000px;/*数值随便设置,越大越好*/
  20. }
  21.  
  22. .left{
  23.     width: 300px;
  24.     float: left;
  25.     background: yellow;
  26. }
  27.  
  28. .right{
  29.     width: 400px;
  30.     float: right;
  31.     background: green;
  32. }
  33. </style>
  34. </head>
  35.  
  36. <body>
  37. <div class="wrap">
  38.     <div class="left">
  39.         left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>end</p>
  40.     </div>
  41.     <div class="right">
  42.     <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>
  43.         <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>
  44.         <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>
  45.         <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>
  46.         <p>left</p><p>
  47.         <p>right</p><p>right</p><p>right</p>
  48.         <p>end</p>
  49.         </div>
  50. </div>
  51.  
  52. </body>
  53. </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. jquery html标签的链式语法

    <div id="ProductNet"> <table border='0' cellspacing='2' cellpadding='0' style='te ...

  2. 用C++程序理解汉字的机内码表示

    汉字的编码是非常多刚開始学习的人不easy搞不明确的事情.最早的汉字字符集是GB2312-80,收入汉字6763个,符号715个,总计7478个字符,大陆普遍使用的简体字字符集.本文借助于一个能输出这 ...

  3. android学习日记05--Activity间的跳转Intent实现

    Activity间的跳转 Android中的Activity就是Android应用与用户的接口,所以了解Activity间的跳转还是必要的.在 Android 中,不同的 Activity 实例可能运 ...

  4. Swift概览

    <pre name="code" class="objc">转自:http://letsswift.com/2014/06/swift_overvi ...

  5. VIM7.3中文手册

    INDEX *index.txt*     For Vim version 7.3.  最近更新: 2010年7月 VIM 参考手册    by Bram Moolenaar 译者: Willis h ...

  6. 《编写高质量代码—改善java程序的151个建议》知识整理一

    1.用偶判断,不用奇判断 案例:在代码i%2==1?"奇数":"偶数" (java中的求余算法相当于:divided-divided/divisor*divis ...

  7. 3D Touch的简单使用

    6s发布以后新增了一个3D touch功能,我个人觉得这个功能点在某些时候还是挺方便的,比如说微信的扫码功能. 直接长按图标就可以进入这个功能里面,不用再打开app.一层层查找了,比较方便. 其实这个 ...

  8. iOS app 上架的流程与注意点

    这里整理了两个关于苹果应用商店上架方面的资料: 一个是app上架的流程,里面包含各个环节的截图,比较详细. 流程介绍链接   (提取码:52a4) 第二个是app上架的一些注意点,这里面主要说的是上架 ...

  9. 深圳安全研讨会圆满结束，PPT共享下载

    深圳安全研讨会圆满结束,PPT共享下载: http://pan.baidu.com/s/19XFtO

  10. PHP Slim 框架初体验之无法访问控制器

    话不多说,先把报错贴出来: 刚开始用slim框架,在设置完自动加载文件和路由文件之后,我写了一个控制器: <?php use \Psr\Http\Message\ServerRequestInt ...