`

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>  


（六）

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

分享到：
评论
发表评论

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

相关推荐

    《精通CSS+DIV网页样式与布局》光盘源码

    　10.1　div 标记与 span 标记 　10.2　盒子模型 　10.3　元素的定位　 　10.4　定位实例一：轻轻松松给图片签名　 　10.5　定位实例二：文字阴影效果　 　第11章　CSS+div布局方法剖析　 　11.1　CSS排版观念　 　...

    精通CSS.DIV.网页样式与布局 源码

    　10.1　div 标记与 span 标记 　10.2　盒子模型 　10.3　元素的定位　 　10.4　定位实例一：轻轻松松给图片签名　 　10.5　定位实例二：文字阴影效果　 　第11章　CSS+div布局方法剖析　 　11.1　CSS排版观念...

    div和span的区别

    div: div是一个块级元素，可以包含段落，表格等内容，用于放置不同的...span是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上&lt;span&gt;&lt;/span&gt;标记可以通过在span上定义样式来设定其内容的样

    精通CSS+DIV网页样式与布局视频教材

    精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址： 目录 第1部分　CSS基础知识篇 第1章　CSS的初步体验 1.1　CSS的概念 1.1.1　标记的概念 1.1.2　传统HTML的缺点 1.1.3　CSS的引入 1.1.4...

    精通CSS+DIV网页样式与布局Part1

    　10.1　div 标记与 span 标记 　10.2　盒子模型 　10.3　元素的定位　 　10.4　定位实例一：轻轻松松给图片签名　 　10.5　定位实例二：文字阴影效果　 　第11章　CSS+div布局方法剖析　 　11.1　CSS排版观念　 　...

    精通CSS.DIV网页样式与布局视频01

    　10.1　div 标记与 span 标记 　10.2　盒子模型 　10.3　元素的定位　 　10.4　定位实例一：轻轻松松给图片签名　 　10.5　定位实例二：文字阴影效果　 　第11章　CSS+div布局方法剖析　 　11.1　CSS排版观念　 　...

    精通CSS+DIV网页样式与布局

    　10.1　div 标记与 span 标记 　10.2　盒子模型 　10.3　元素的定位　 　10.4　定位实例一：轻轻松松给图片签名　 　10.5　定位实例二：文字阴影效果　 　第11章　CSS+div布局方法剖析　 　11.1　CSS排版观念　 　...

    HTML中div与span的区别(共同点与不同点)

    DIV标签和SPAN标签是将一些内容当成一个整体进行处理，比如，整体隐藏，整体移动。类似一个盒子一样的东西。这样做可以精简代码，提高效率。 不同点： 1、div是将内容放到一个矩形的区块中，随意移动会影响布局。而...

    CSS布局是网页html通过div标签+css样式表代码开发制作的（html）网页的统称。

    float浮动属性，用于设置标签对象（如：div、span、a、em等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。 float的作用：通过css定义float（浮动）让...

    区别div和span、relative和absolute、display和visibility

    　span是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上&lt;span&gt;&lt;/span&gt;标记可以通过在span上定义样式来设定其内容的样式。 二、relative和absolute的区别　relative，CSS中的写法是：...

    CSS网站布局实录 （第二版）PDF版

    6.2 div与span 6.3 CSS选择符的命名 6.3.1 大小写敏感 6.3.2 合法字符及组合 6.3.3 命名建议 6.4 CSS文件结构设计与优化 6.4.1 导入结构 6.4.2 结构优化 6.5 使用CSS缩写 6.5.1 font字体缩写 6.5.2 margin与padding...

    DIV+CSS布局体验总结 脚本之家推荐

    1: ID用于标识页面单独元素以及持久行的结构性元素 方便JS的调用 类用于标识同一页面可重复定义使用的结构性元素 ID与类的... 3：DIV与SPAN DIV（块级框）用于对块级元素的分组 SPAN（行内框）用于对行内元素分组标识

    零基础学HTML CSS源代码

    DIV布局样式.html 设置DIV布局样式。 如何用DIV布局.html 演示如何用DIV布局。 第13章（源代码\第13章） 示例描述：本章演示DIV与SPAN用法。 SPAN基本语法.html SPAN基本语法。 何时该用SPAN....

    经验之谈 CSS网页布局避免滥用DIV元素

    页面中div与span元素的使用是一个新问题，我们也容易过多的使用它们。必要及合理的使用div可以明显的增强文档的结构性。这也是jb51.net一直提倡的。 如果你审视你的HTML文档，发现有着很多的div与span，那你就得换一...

    《CSS全程指南》随书光盘

    9.2.4 div和span的区别 199 9.3 div+CSS布局介绍 200 9.3.1 div+CSS布局的优点 200 9.3.2 div+CSS布局的缺点 201 9.3.3 何时使用TABLE 202 9.4 一列布局 203 9.4.1 一列固定宽度 203 9.4.2 一列宽度自适应 204 9.4.3...

    深入CSS结构：div再议以及对span的迷惑

    篇文章中主要否定了使用div进行布局这种说法，提出div应当用于组织代码结构，现在我们再深入一点，div拥有语义吗？这个问题前段时间在研究群里曾激烈争论过，当时米随随发问：“什么是语义化WEB，div是什么？”小毅...

    前端css+html+布局笔记

    div &gt; span {} div &gt; p{} 声明块 声明块中实际上就是一个一个CSS声明 声明 每一个CSS声明都是一个样式，实际上就是一个名值对的结构 名和值之间使用:链接 :左边是样式的名字 :右边是样式的...

    仅用CSS让你的div模块旋转

    html语言编写，div或者table布局，css设置样式，javascript设置响应，交互，这就是我最初印象中网页最基础最原始的存在，于是在这里就给css定了性，设置样式：样式嘛，就好像是装修的效果，只有最初的原始状态和装修...

Magicbox
Global site tag (gtag.js) - Google Analytics