首页  »   Web前端

Div内的Span格局样式处理

网友分享于:2015-04-24  浏览:0次
Div内的Span布局样式处理

(一)

一段HTML代码:

[css] view plaincopy
 
  1. <div class="box">  
  2. <span>您好!</span>  
  3. <span>您好,这是完整不能换行!</span>  
  4. <span>您好,但是box宽的不够宽时,每项能自动换行!</span>  
  5. <span>你好,项内文件超长时不能换行!</span>  
  6. <span>您好,且不能覆盖重叠下一项!</span>  
  7. </div>  


要求显示效果如下:

 

在IE8,chrome,firefox下很容易实现。

[css] view plaincopy
 
  1. .box{  
  2. width:100%;  
  3. height:auto;  
  4. }  
  5.   
  6. .box span{  
  7. float:left;  
  8. line-height:20px;  
  9. height:20px;  
  10. border:1px solid red;  
  11. margin:3px 3px 0px 0px;  
  12.   
  13. }  


但是在IE7模式下效果如下:


 

ie7下,为了填充满box的宽度。在剩余宽度内增加了一个span。但剩余宽度又不足以容下所有内容。只有换行。但因为该span起始位置已经固定。只能在此位置下向下拓展。

因为高度已经设定。多出的文本似乎挤出到外面去了。此时调整宽度后,可能会和第2行的span重叠起来。如下:

我们再看看IE的quirks诡异模式。此模式近似ie7,但会忽略span的高度设定。自动把行高自动调整为内容适应的高度。

新span会在此高度之后换行。这样就不会重叠在一起了。

此时只需要在.box span中增加一个white-space: nowrap;设定不换行。ie7和怪异模式也都会在剩余空间无法容纳span项全部内容时项自动换行了。

此时样式基本做到跨所有主流浏览器(其他微小细节与本文无关 暂忽略)。

 

(二)

但是,假如第3个span标签内容增加一个强制换行符,修改为如下时:

[html] view plaincopy
 
  1. <span>您好,但是box宽的不够宽时,<br />每项能自动换行!</span>  


我们希望的效果浏览器能支持span内强制换行,但同时内容不能被新的span覆盖。

ie-quirks模式效果:

ie7,ie8,chrome效果接近如下

为了使各浏览器都满足ie-quirks模式效果。我们需要调整。.box span中的的heigh样式

height:auto;

此时所有浏览器效果几乎一致了。

 

(三)

此时我们需要把父div的边框显示出来。修改了样式

[css] view plaincopy
 
  1. .box{  
  2. width:100%;  
  3. height:auto;  
  4. border:1px solid gray;  
  5. padding:2px;  
  6. }  

 

我们希望看到的效果是(ie-quirks模式,ie7显示效果如下):

但是在ie8,chrome模式下我们看到的效果确是:

为了满足如上要求。我们需要使用一个新的标签来清除浮动。只有这样 在ie8,chrome等新浏览器下,box才会自动计算真实的高度。

否则box的高度为0。修改html代码如下

[html] view plaincopy
 
  1. <div class="box">  
  2. <span>您好!</span>  
  3. <span>您好,这是完整不能换行!</span>  
  4. <span>您好,但是box宽的不够宽时,每项能自动换行!</span>  
  5. <span>你好,项内文件超长时不能换行!</span>  
  6. <span>您好,且不能覆盖重叠下一项!</span>  
  7. <div style="clear:both;"></div>  
  8. </div>  

 

(四)

可是面试官告诉我们。你不能动HTML代码。你只有修改CSS样式的权限(以前百度空间。。。等博客不是都有这样的限制么,现在不知道是否还是如此)

没有办法了吗?还是有的。

我们把父元素box 样式中 增加一个浮动。 所有的浏览器在不修改HTML情况下也都能正常显示box的边框了。

[css] view plaincopy
 
  1. .box{  
  2. width:100%;  
  3. height:auto;  
  4. border:1px solid gray;  
  5. padding:2px;  
  6. float: left;  
  7.   
  8. }  


 

(五)

可是新问题来了。 父元素box使用了浮动,会影响和他同级的其他元素的显示呢?能不能不修改父元素的浮动属性解决此问题呢。

 

我们增加一个after伪元素样式。在box后面通过样式添加一个block元素(否则无效),然后设置清楚浮动。详细CSS代码如下:

[css] view plaincopy
 
  1. .box:after  
  2. {  
  3. content:"";  
  4. display:block;  
  5. clear:both;  
  6. }  

并且在html最顶部增加显示DOCTYPE声明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

至此iequirks模式,ie7,ie8,chrome,firefox等浏览器都兼容了。

 

完整代码如下:

[html] view plaincopy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.   
  3. <html>  
  4. <head>  
  5. <style>  
  6. .box{  
  7. width:100%;  
  8. height:auto;  
  9. border:1px solid gray;  
  10. padding:2px;  
  11. }  
  12.   
  13. .box span{  
  14. float:left;  
  15. line-height:20px;  
  16. height:auto;  
  17. border:1px solid red;  
  18. margin:3px 3px 0px 0px;  
  19. white-space: nowrap;  
  20.   
  21.   
  22. }  
  23.   
  24. .box:after  
  25. {  
  26. content:"";  
  27. display:block;  
  28. clear:both;  
  29. }  
  30. </style>  
  31. </head>  
  32.   
  33.   
  34. <body>  
  35.   
  36. <div class="box">  
  37. <span>您好!</span>  
  38. <span>您好,这是完整不能换行!</span>  
  39. <span>您好,但是box宽的不够宽时,每项能自动换行!</span>  
  40. <span>你好,项内文件超长时不能换行!</span>  
  41. <span>您好,且不能覆盖重叠下一项!</span>  
  42.   
  43. </div>  
  44. </body>  
  45. </html>  


(六)

解决了所有问题了吗?应该没有。还有很多细节存在细微出入,要兼容各种浏览器,要做的事情还很多。

相关解决方案

最新解决方案