div中ul高度自增解决办法

div中ul高度自增解决办法

处理前:

 

div中ul高度自增解决办法

处理后:

div中ul高度自增解决办法

处理代码:

 


  1. <style>  
  2. ul{ 
  3.     border:1px solid red; 
  4.     width:300px; 
  5.     height:auto; 
  6. }  
  7. li{ 
  8.     border:1px solid #00f; 
  9.     width:100px; 
  10.     height:30px; 
  11.     float:left; 
  12. }  
  13. </style>  
  14.  
  15. <ul>  
  16.     <li>1</li>  
  17.     <li>2</li>  
  18.     <li>3</li>  
  19.     <li>4</li>  
  20. </ul>  
  21. <div style="clear:both;visibility:hidden"></div> 
  22. <div style="border:1px solid #360"> 
  23.  div中ul高度自增 div中ul高度自增 div中ul高度自增 div中ul高度自增 div中ul高度自增 
  24. </div> 

 

重点是这句(加在ul后面即可):

<div style="clear:both;visibility:hidden"></div>

clear:both 规定在左右两侧均不允许出现浮动元素。

这个属性是用来控制float属性在文档流的物理位置的。当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。

 

visibility:hidden 规定元素是否可见

 

display:none 和 visibility:hidden的区别:

display:none:使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;

visibility:hidden:使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。






      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/1168686,如需转载请自行联系原作者





上一篇:iPhone is busy: Preparing debugger support for iPhone的解决办法


下一篇:RHCE学习<9>Rsync备份同步、NTP和Rsyslog日志管理