冷门属性系列——display:table

首页 » XHTML+CSS » 冷门属性系列——display:table

冷门属性系列——display:table

作者: xiaohu | 时间: 2010年1月04日 | 分类: XHTML+CSS

当你对一张图片进行浮动的时候，它周围的文本会跟着它一起浮动起来。这是正常的显示效果，但是有时候我们不希望它这样显示。
下面这个例子，我想让这张图片浮动在标题和块级文本元素的右侧。可是你发现效果并不是你想要的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSSZone</title> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; color:#333; margin:50px; font-size:12px; } img { padding: 5px; border: 1px solid #ddd; float: right; margin: 0 0 10px 10px; } h1 { font: bold 16px/14px Arial, Helvetica, sans-serif; color: #6290c9; } h2 { font: bold 12px/26px Arial, Helvetica, sans-serif; color: #768e83; border: 1px solid #e3efdc; } </style> </head> <body> <h1>CSSZone</h1> <h2>2010-01-01</h2> <p><img src="http://www.csszone.net/wp-content/uploads/2010/01/100104.jpg" alt="" width="200" height="130" />Team：我们是一支团队，热爱互联网，热爱网站前端技术。</p> <p>Devigner：Designer+Developer，即设计人员和技术人员结合起来的Web协作开发人员。</p> <h2>2010-01-02</h2> <p>这是一个展示你自己的平台，因为文章的署名是你的，写作风格也是你的，只要你的文章有一定的水准，你会被人记住的。即使你已经拥有了自己的blog，也可以在我们这里同步发表，我们会在文章结尾的地方，注明此文章同步发表在：www.XXX.com，这无形中也是为你的blog做一次推广。</p> </body> </html> 提示：你可以先修改部分代码再运行。

我想，大家的解决办法应该都是在浮动元素结束标签后面添加一个额外的元素，并且给它附上”clear：both;”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSSZone</title> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; color:#333; margin:50px; font-size:12px; } hr { clear:both; visibility:hidden; height:1px; margin:0; } img { padding: 5px; border: 1px solid #ddd; float: right; margin: 0 0 10px 10px; } h1 { font: bold 16px/14px Arial, Helvetica, sans-serif; color: #6290c9; } h2 { font: bold 12px/26px Arial, Helvetica, sans-serif; color: #768e83; border: 1px solid #e3efdc; } </style> </head> <body> <h1>CSSZone</h1> <h2>2010-01-01</h2> <p><img src="http://www.csszone.net/wp-content/uploads/2010/01/100104.jpg" alt="" width="200" height="130" />Team：我们是一支团队，热爱互联网，热爱网站前端技术。</p> <p>Devigner：Designer+Developer，即设计人员和技术人员结合起来的Web协作开发人员。</p> <hr /> <h2>2010-01-02</h2> <p>这是一个展示你自己的平台，因为文章的署名是你的，写作风格也是你的，只要你的文章有一定的水准，你会被人记住的。即使你已经拥有了自己的blog，也可以在我们这里同步发表，我们会在文章结尾的地方，注明此文章同步发表在：www.XXX.com，这无形中也是为你的blog做一次推广。</p> </body> </html> 提示：你可以先修改部分代码再运行。

这并不是最优方案，因为我们发现，这个额外元素会在IE中创造一个多余的空格。
那这时，大家基本上都不会用的一个属性display：table就派上了用场。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSSZone</title> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; color:#333; margin:50px; font-size:12px; } .clearfloat { display: table; width: 100%; } img { padding: 5px; border: 1px solid #ddd; float: right; margin: 0 0 10px 10px; } h1 { font: bold 16px/14px Arial, Helvetica, sans-serif; color: #6290c9; } h2 { font: bold 12px/26px Arial, Helvetica, sans-serif; color: #768e83; border: 1px solid #e3efdc; } </style> </head> <body> <div class="clearfloat"> <h1>CSSZone</h1> <h2>2010-01-01</h2> <p><img src="http://www.csszone.net/wp-content/uploads/2010/01/100104.jpg" alt="" width="200" height="130" />Team：我们是一支团队，热爱互联网，热爱网站前端技术。</p> <p>Devigner：Designer+Developer，即设计人员和技术人员结合起来的Web协作开发人员。</p> </div> <div class="clearfloat"> <h2>2010-01-02</h2> <p>这是一个展示你自己的平台，因为文章的署名是你的，写作风格也是你的，只要你的文章有一定的水准，你会被人记住的。即使你已经拥有了自己的blog，也可以在我们这里同步发表，我们会在文章结尾的地方，注明此文章同步发表在：www.XXX.com，这无形中也是为你的blog做一次推广。</p> </div> </body> </html> 提示：你可以先修改部分代码再运行。

在内容的外面套一层div，然后给div附上”display:table”;

.clearfloat { 
     display: table; 
     width: 100%; 
}

可能你会说，这个div的存在是没必要的，它跟hr一样是多余的。但是你能找到其他更好的方法来代替这个div吗？在这个例子中，它的存在的确是有意义的。如果你有更优方案，留言吧。

除非注明，本博客文章均为该作者原创，转载请以链接形式标明本文地址
本文地址：http://www.csszone.net/index.php/archives/654

« CSSZone发起全民升级Internet Explorer 6活动 | 听取各方言论“google要走了” »

现有7条评论

lin04com 说：

2010/01/05于00:56

首先我承认display:table是一个冷门的style，以至于我都不是很了解这个属性怎么使用，如果遇到这种情况，我想可以这样解决：
.test{ float:left; width:100%;}

1
2
3

<p class="test"><img src="http://www.etomi.cn/wp-content/uploads/2010/01/100104.jpg" 
alt="" width="200" height="130" />
Team：我们是一支团队，热爱互联网，热爱网站前端技术。</p>

Mosason 说：

2010/01/05于13:19

我试了一下你的方法，效果不对吧…

回复

anonymous 说：

2010/01/05于07:35

冷门是因为ie6，7不支持，否则的话元素的居中等问题就不需要考虑了，直接一个display:table-cell就搞定了。

另外如果是你上面讲的那个效果的话，还是清除浮动最简单。

回复
- johnsonljl 说：
  
  2010/01/05于09:30
  
  +1
  
  回复
- Mosason 说：
  
  2010/01/05于11:26
  
  在我们这个例子中，display显示指定元素为盒模型，这点正是它强大之处。它可以”覆盖”默认的呈现方式。注意我用的是覆盖，而不是附加在原有属性上。
  如果用清除浮动，总是会有一个无意义的空间插在你的内容中。
  
  回复
  - johnsonljl 说：
    
    2010/01/05于12:15
    
    1.”display:table”:让一个HTML元素和它的子节点像table元素一样
    2.display显示指定元素为盒模型，这个是啥意思
    3.在h2上清理浮动不行吗？
    
    回复
    - Mosason 说：
      
      2010/01/05于12:29
      
      你的第一点就帮我解释了，这个元素被display为一个“table”了，是吗？不是盒模型吗？
      h2上清浮动，在ie下会多出一条空白边。实验一下。
      
      回复

CSSZone | 专注前端交互,专注用户体验

冷门属性系列——display:table

现有7条评论

Leave a Reply

站内搜索

热文排行

最新文章

友情链接

同分类文章