多个div左对齐float时，高度自动对齐或匹配

最新推荐文章于 2023-05-28 16:28:27 发布
99guo
最新推荐文章于 2023-05-28 16:28:27 发布
阅读量1w
点赞数
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 
 < 
 html  
 xmlns 
 = 
 "http://www.w3.org/1999/xhtml" 
 > 
 
 < 
 head 
 > 
 
 < 
 meta  
 http-equiv 
 = 
 "Content-Type"  
 content 
 = 
 "text/html; charset=utf-8"  
 /> 
 
 < 
 title 
 >div等高处理</ 
 title 
 > 
 
 < 
 style  
 type 
 = 
 "text/css" 
 > 
 
 /*统一设置body属性*/ 
 
 body{ 
 
 padding: 0; 
 
 margin: 0; 
 
 font-size: 12px; 
 
 font-family: Arial, Helvetica, sans-serif; 
 
 line-height: 140%; 
 
 text-align: center; 
 
 background:#E7DFD3; 
 
 } 
 
 #wrap{ 
 
 width: 750px; 
 
 margin: 0 auto; 
 
 overflow: hidden;   /*用overflow: hidden 到容器里的元素*/ 
 
 } 
 
 #header{ 
 
 background: #E8E8E8; 
 
 } 
 
 #sideleft{                /*设置左边通栏*/ 
 
 width: 580px; 
 
 float: left;         
 
 background: #FFF; 
 
 text-align: left; 
 
 } 
 
 #sideright{                /*设置左边通栏*/ 
 
 width: 170px; 
 
 float: left; 
 
 background: #F0F0F0; 
 
 text-align: left; 
 
 } 
 
 /*解决内层浮动后外面丢失高度的BUG*/ 
 
 #wrap:after{ 
 
 content: '[DO NOT LEAVE IT IS NOT REAL]';  
 
 display: block;  
 
 height: 0;  
 
 clear: both;  
 
 visibility: hidden; 
 
 } 
 
 #wrap{ 
 
 display: inline-block; 
 
 } 
 
 /*\*/ 
 
 #wrap{ 
 
 display: block; 
 
 } 
 
 /* end easy clearing */ 
 
 /*\*/ 
 
 #sideleft, #sideright{ 
 
 padding-bottom: 32767px !important;  /*应用 padding-bottom（足够大的值）到列的块元素*/ 
 
 margin-bottom: -32767px !important;  /*应用 margin-bottom（足够大的值）到列的块元素*/ 
 
 } 
 
 @media all and (min-width: 0px){ 
 
 #sideleft, #sideright{ 
 
 padding-bottom: 0 !important; 
 
 margin-bottom: 0 !important;  
 
 } 
 
 #sideleft:before, #sideright:before{ 
 
 content: '[DO NOT LEAVE IT IS NOT REAL]'; 
 
 display: block; 
 
 background: inherit; 
 
 padding-top: 32767px !important; 
 
 margin-bottom: -32767px !important; 
 
 height: 0; 
 
 } 
 
 } 
 
 /**/ 
 
 #footer{ 
 
 background: #E8E8E8; 
 
 width: 100%; 
 
 float: left; 
 
 } 
 
 h1,h2,p{ 
 
 margin: 0; 
 
 padding: .8em; 
 
 } 
 
 h1,h2{font-size: 20px;} 
 
 </ 
 style 
 > 
 
 </ 
 head 
 > 
 
 < 
 body 
 > 
 
 < 
 div  
 id 
 = 
 "wrap" 
 > 
 
 < 
 div  
 id 
 = 
 "header" 
 > 
 
 < 
 h1 
 >Header</ 
 h1 
 > 
 
 </ 
 div 
 > 
 
 < 
 div  
 id 
 = 
 "sideleft" 
 > 
 
 < 
 h2 
 >sideleft</ 
 h2 
 > 
 
 < 
 p 
 > 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </ 
 p 
 > 
 
 < 
 p 
 > 像素是计算机屏幕上的不可缩放的点，而一个 
 
 h3 就是一个字大小的方块。由于字体大小的变化， h3 
 
 代表用户喜欢的文字大小的相对单位。 </ 
 p 
 > 
 
 < 
 p 
 > 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </ 
 p 
 > 
 
 < 
 p 
 > 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </ 
 p 
 > 
 
 < 
 p 
 > 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </ 
 p 
 > 
 
 < 
 p 
 > 像素是计算机屏幕上的不可缩放的点，而一个 
 
 h3 就是一个字大小的方块。由于字体大小的变化， h3 
 
 代表用户喜欢的文字大小的相对单位。 </ 
 p 
 > 
 
 < 
 p 
 > 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </ 
 p 
 > 
 
 < 
 p 
 > 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </ 
 p 
 > 
 
 </ 
 div 
 > 
 
 < 
 div  
 id 
 = 
 "sideright" 
 > 
 
 < 
 h2 
 >sideright</ 
 h2 
 > 
 
 < 
 p 
 > 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </ 
 p 
 > 
 
 < 
 p 
 > 像素是计算机屏幕上的不可缩放的点，而一个 
 
 h3 就是一个字大小的方块。由于字体大小的变化， h3 
 
 代表用户喜欢的文字大小的相对单位。 </ 
 p 
 > 
 
 < 
 p 
 > 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </ 
 p 
 > 
 
 < 
 p 
 > 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </ 
 p 
 > 
 
 </ 
 div 
 > 
 
 < 
 div  
 id 
 = 
 "footer" 
 > 
 
 < 
 h1 
 >Footer</ 
 h1 
 > 
 
 </ 
 div 
 > 
 
 </ 
 div 
 > 
 
 </ 
 body 
 > 
 
 </ 
 html 
 >