zoukankan      html  css  js  c++  java
  • CSS等高布局,3div自适应最高的高度

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
      <title>CSS等高布局</title> 
      <style type="text/css"> 
      *{  margin:0;  padding:0;  } 
      #wrap{   width:1000px;  margin:0 auto; overflow:hidden;  zoom:1;/* for ie6 */ }
      #left,#center,#right{  margin-bottom:-10000px;  padding-bottom:10000px;  } 
      #left{  float:left;  width:250px;  background:#00FFFF;  }
      #center{  float:left;  width:500px;  background:#FF0000;  } 
      #right{  float:right;  width:250px;  background:#00FF00;  } 
    </style> 
    </head> 
    <body> 
    <div id="wrap"> 
        <div id="left"> 
            <p>left</p> <p>left</p> <p>left</p> <p>left</p> <p>left</p>
        </div>
        <div id="center">
            <p>center</p> <p>center</p> <p>center</p> 
        <p>center</p> <p>center</p> <p>center</p>
        <p>center</p> <p>center</p> <p>center</p>
        <p>center</p> <p>center</p> <p>center</p>
        
    <p>center</p> <p>center</p> <p>center</p>
        <p>center</p> <p>center</p> <p>center</p> <p>center</p>
        
    <p>center</p> </div> <div id="right"> <p>right</p> <p>right</p> <p>right</p> </div> </div> </body> </html>

     子div:  margin-bottom:-1000px; padding-bottom:1000px;

    父div: overflow:hidden; zoom:1;

    子div padding-bottom:1000px; 把自己的盒子向下推开 变高了;margin-bottom:-1000px; 让父div可以向上收缩到内容实体的高度,含内容实体高度最高的子div把父div的收缩挡住了,所以看上去3个div高度相等。其实空白的高度都是padding,是可以布局内容的padding,因为设置了负外边距

  • 相关阅读:
    Caused by SSLError(SSLError(1, u'[SSL: CERTIFICATE_VERIFY_FAILED] certificat
    git快速生成配置sshkey
    快速合并多个git项目到同一目录
    一次性删除docker images中name为none的镜像
    mongo数据库数据库导入、导出
    python下ssh的简单实现
    python操作mysql
    Python的方法解析顺序(MRO)[转]
    python异常处理
    面向对象类成员
  • 原文地址:https://www.cnblogs.com/stephenykk/p/3116867.html
Copyright © 2011-2022 走看看