Div内的Span布局样式处理

最新推荐文章于 2021-08-12 22:40:10 发布

hatwn

最新推荐文章于 2021-08-12 22:40:10 发布

阅读量3.1k

点赞数

分类专栏： html&css 文章标签： xhtml

本文链接：https://blog.csdn.net/hatwn/article/details/84714174

版权

本文探讨了如何处理Div内的Span布局样式，以实现跨浏览器兼容，包括IE7、IE8、Chrome、Firefox等。主要内容涉及浮动、行高、强制换行、清除浮动、伪元素等CSS技巧，确保在不同浏览器下不覆盖重叠并显示正确的边框。

摘要由CSDN通过智能技术生成

（一）

一段HTML代码：

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

要求显示效果如下：

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

[css]view plaincopy
        
    
.box{  
width:100%;  
height:auto;  
}  
  
.box span{  
float:left;  
line-height:20px;  
height:20px;  
border:1px solid red;  
margin:3px 3px 0px 0px;  
  
}  