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,因为设置了负外边距

  • 相关阅读:
    滴水穿石mysql添加授权用户命令
    滴水穿石修改IIS服务器的MIME类型
    滴水穿石Java静态代理
    滴水穿石MyEclipse中集成开发插件Spket
    滴水穿石Java连接Access数据库及其操作
    好站收藏
    apache缓存设置
    Linux Apache开启gzip压缩提高网页下载速度
    web制作、开发人员需知的Web缓存知识
    cookiec和session学习笔记
  • 原文地址:https://www.cnblogs.com/stephenykk/p/3116867.html
Copyright © 2011-2022 走看看