2007-04-02

不用js也能实现几个未知高度的容器对齐

关键字: 高度对齐
css 代码
 
  1. /* easy clearing */  
  2. div#content:after {   /*  overflow:hidden    must be in   div#content  */  
  3.     content: '[DO NOT LEAVE IT IS NOT REAL]';   
  4.     display: block;  
  5.     height: 0;   
  6.     clear: both;   
  7.     visibility: hidden;  
  8. }  
  9. div#content { display: inline-block; }  
  10. /*\*/  
  11. div#content { display: block; }  
  12. /* end easy clearing */  
  13. /*\*/  
  14. #secondaryNavigation,#primaryContent{   
  15.     padding-bottom: 32767px !important;  
  16.     margin-bottom: -32767px !important; }  
  17. @media all and (min-width: 0px) {  
  18. #secondaryNavigation,#primaryContent {   
  19.     padding-bottom: 0 !important;   
  20.     margin-bottom: 0!important;   
  21. }  
  22. #secondaryNavigation:before,#primaryContent:before{  
  23.     content: '[DO NOT LEAVE IT IS NOTREAL]';   
  24.     display: block;  
  25.     background: inherit;   
  26.     padding-top: 32767px!important;  
  27.     margin-bottom: -32767px !important;  
  28.     height: 0;   
  29. }  
  30. }  
content作为外层容器，secondaryNavigation，primarynavgation作为内部容器；

注意：几个容器必须是并行的，并且必须在外层容器上设置 overflow：hidden属性，几个选择器上伪类的定义不可少。
虽然看上去有些杂乱，但如果不用js也能实现几个未知容器高度的自适应 也未尝不是件巧妙的事，更重要的是在ff、ie下均有效，而且屡试不爽。
评论
发表评论

您还没有登录，请登录后发表评论

tiger.passion
搜索本博客
我的相册
636a5d3f-1fce-3bb9-89d8-b13e5c6318d4-thumb
w3c01
共 46 张
存档
最新评论