原文地址：https://www.cnblogs.com/cbza/p/7145384.html

方法一: 通过父级overflow:hidden,  自己设置padding-bottom 和 margin-bottom来实现.（方法一亲测有效）

  1. #wrap{
  2.  overflow:hidden;
  3.  width:1000px;
  4.  margin:0 auto;
  5. }
  6. #left,#center{
  7.  margin-bottom:-10000px;
  8.  padding-bottom:10000px;
  9. }
  10. #left{
  11.  float:left;
  12.  width:250px;
  13.  background:#00FFFF;
  14.  }
  15. #center{
  16.  float:left;
  17.  width:500px;
  18.  background:#FF0000;
  19.  }

<p>参考链接:&nbsp; <a href="http://yanue.net/post-35.html" target="_blank"> 纯css实现div左右等高</a></p>

方法二: 使用 table-cell

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style>
  7.         .left,
  8.         .right {
  9.             padding: 10px;
  10.             display: table-cell;
  11.             border: 1px solid #f40;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16. <div class="wrap">
  17.     <div class="left">
  18.         left div
  19.         <br/>
  20.         <br/>
  21.         <br/>
  22.         <br/>
  23.         <br/>
  24.     </div>
  25.     <div class="right">right div</div>
  26. </div>
  27. </body>
  28. </html>

<p>&nbsp;参考链接:&nbsp;&nbsp; <a href="http://blog.csdn.net/qinshenxue/article/details/44861695" target="_blank">纯css实现div左右等高</a></p>

方法三:使用css3盒模型

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style>
  7.         .wrap {
  8.             display: -webkit-box;
  9.         }
  10.         .left,
  11.         .right {
  12.             padding: 10px;
  13.             border: 1px solid #f40;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18. <div class="wrap">
  19.     <div class="left">
  20.         left div
  21.         <br/>
  22.         <br/>
  23.         <br/>
  24.         <br/>
  25.         <br/>
  26.     </div>
  27.     <div class="right">right div</div>
  28. </div>
  29. </body>
  30. </html>

<p>&nbsp;参考链接: <a href="http://blog.csdn.net/qinshenxue/article/details/44861695" target="_blank">纯css实现div左右等高</a></p>

css 实现 左右div 等高, 同时父级div就是最高的子div的高度的更多相关文章

  1. 【html/css】若母div设置了透明度，如何才能使得里面的子div不继承母div的透明度

    用rgba的方式给母div设置透明度的话就不会影响子div的透明度了. 例: background: rgba(51, 51, 51, 0.5);

  2. 当父级是body时，子元素设置position：absolute；定位是根据body还是html呢？

    position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...

  3. jquery获取元素（父级的兄弟元素的子元素）

    一.获取父级元素 使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素 使用jquery获取同级元素:siblings() 例如:$(t ...

  4. 父级元素position:absolute，子节点也是absolute

    当父级属性position是absolute,子节点也是absolute的时候,子节点是相对父级absolute的,举个例子 <div class="headManage"& ...

  5. JS 用window.open()函数，父级页面如何取到子级页面的返回值？

    父窗口:<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> ...

  6. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

  7. js变量在属性里的写法 常用mark 多个DL遍历添加一个父级DIV

    标记用 js变量比如url链接一般都是a里面的href属性值 在js里单引号链接 以后再忘记就能有地方找了 例子: /* 添加1200 居中div 包裹 获取元素集合 上层元素100% * @ele ...

  8. 子div块中设置margin-top时影响父div块位置的解决办法

    在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办 ...

  9. 父div的透明度不影响子div透明度

    在设置div的透明度的时候如果设置了父div的透明度(opacity=0.8),那么子div的透明度也随着改变了,并且设置子div的透明度不起作用. 这种情况下可以使用rgba来设置父div的透明度: ...

随机推荐

  1. linux查看日志文件命令

    转:https://www.cnblogs.com/zdz8207/p/linux-log-tail-cat-tac.html linux查看日志文件内容命令tail.cat.tac.head.ech ...

  2. python基础—sys与os库

    python可以用sys库打印环境变量或者查看当前文件的脚本路径,具体代码: import sysprint(sys.path[2])#打印环境变量print(sys.argv)#当前脚本路径 os库 ...

  3. JAVA003-变量、数据类型

    一.变量的三个元素:变量名(房间名字).变量类型(房间的类型).变量值(入住的人). 二.变量的命名规则: 1.驼峰法     2.尽量简单,见名知意     3.长度没有限制     4.满足标志符 ...

  4. xshell连不上虚拟机

    一般都是下边这种情况 查看 虚拟机的ip   ip a 看看是否有IP地址 如果没有的话,win+r 输入services.msc 把这三个服务设为正在运行状态 #虚拟机连不上网 前戏: 查看xshe ...

  5. CSS-图片占位的技巧

      图片占位技巧,防止动态获取图片 网络慢,页面一跳一跳的情况发生 .food .image-header {                position: relative;  width: 1 ...

  6. 兄弟连学python---Socket介绍

    UDP协议 UDP:用户数据报协议,不可靠性,只是把应用程序传给IP层数据报送出去,但是不能保证他们是否能到达目的地,传输数据报钱不用再客户端和服务器之间建立连接,并且没有超时重发机制,所以传输速度快 ...

  7. 简述iproute家族命令

    ifconfig 是用来查看.配置.启用或禁用网络接口的工具.可以用这个工具来临时配置网卡的IP地址.掩码.广播地址.网关等. 语法 ifconfig [interface] 参数 up 启动指定网络 ...

  8. Ubuntu使用总结二

    Ubuntu使用 - 1.ubuntu怎么切换到root用户,切换到root账号方法 ubuntu怎么切换到root用户,我们都知道使用su root命令,去切换到root权限,此时会提示输入密码, ...

  9. git 分支管理记录

    测试环境 :虚拟机(VMware Fusion Centos 6.5) 1.安装git环境 [root@localhost ~]# yum -y install git 2.检测git是否安装成功 [ ...

  10. 疯狂java讲义 第八章课后题

    1.创建一个Set集合,并用Set集合保存用户通过控制台输入的字符串. import java.util.HashSet; import java.util.Scanner; public class ...