位置：首页>> 网络编程>> 网页设计>> display:inline问题小结

display:inline问题小结

作者：Robin　来源：Rlog　发布时间：2008-05-01 13:08:00　

标签：display,inline,布局,css

昨天我突发奇想,想用display:inline来实现三列的布局可是搞了半天就是不行。但是理论上是可以的呀（后来才发现是不理解的不深刻，我的理论是错误的[flower]）。在蓝色上：

display:inline理论上理解应该是不换行(太肤浅)的意思吧。但是却在IE6里什么都看不见。而在FF里只显示细条。怎么回事呢？

<!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>无标题文档</title>
<style>
#layout{width:606px; height:200px;}
#left{ display:inline; width:200px; height:200px; border:1px #0099FF solid;}
#mid{ display:inline; width:200px; height:200px; border:1px #0FE87A solid; }
#right{ display:inline; width:200px; height:200px; border:1px #B40FE8 solid;}
#bottom{width:606px; border:1px #FFCC66 solid; height:100px;}
</style>
</head>

蓝色上的 marvellous 说：ie6里去掉：

<!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">

就可以了。我试了，确实是可以了。可是为什么呢？
原来是这样：
去掉这句让IE6进入Quirks Mode，在这种渲染模式下，inline元素也可以接受宽高——但这是不对的，他的存在是为了兼容老版本IE的错误行为。

原来如此呀，可是我的问题还是没有解决。

终于我还是找到了原因：
display:inline; 表示内联样式，这个样式自身是不具备高度的，所以不适用于块级元素。
所以要实现三列还是老老实实用float吧。

<!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>无标题文档</title>
<style>
#layout{width:606px; height:200px;}
#left{ float:left; width:200px; height:200px; border:1px #0099FF solid;}
#mid{ float:left; width:200px; height:200px; border:1px #0FE87A solid; }
#right{ float:left; width:200px; height:200px; border:1px #B40FE8 solid;}
#bottom{width:606px; border:1px #FFCC66 solid; height:100px;}
</style>
</head>

关于Quirks Mode需要阅读：MSDN相关内容

投稿

display:inline问题小结

猜你喜欢