CSS等高布局,3div自适应最高的高度_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:27:18
Original
1046 Leute haben es durchsucht

  <!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> 
Nach dem Login kopieren

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage