CSS中多列块的实现小结 display : inline-block 内联块

最近在折腾HTML5和CSS3    -->   示例页面

在做网页菜单的时候，最上面需要加一行工具栏，并排放的，那我想弄四个等宽的box，然后并排放，这样以后想扩展也很好扩展。

刚开始用display:inline，但是怎么调也调不出来效果，貌似这个现实的宽度和长度会根据其中的文字或者图片的格式来定义，所以对块的支持不好。

那根据需求，我是希望外层块作为内联，而这个块里面的内容还是block。

后来上网苦找，终于找到了这个在CSS2.1的时候引入的 inline-block！！

2002年W3C推出CSS2.1规范时，给元素的display属性增加了inline-block值。其作用是“这个值导致一个元素产生一个块状盒模型（block box），而本身作为单一的内联盒模型（inline box）流动排列（flow），类似一个被替代的元素。Display值为inline-block的元素内部形成一个块状盒模型，而本身形成类似一个内联的被替代元素”^[1]。即display为inline-block的元素既可以像块状元素一样定义高度宽度，又可以和内联元素（比如文字）排列在一行。

这个效果在页面设计的时候，很多地方都可以带来便利，最常见的莫过于设计导航时，既可以像inline元素那样实现居中，又可以设置像block元素那样设置单个菜单大小，还可以通过text-indent来隐藏文字显示背景图片。

我不得不说这个东西，是需求驱动的一个产物！

在起初不了解这个东西的时候，无数次的发现css的一些难以实现的布局，而后你会发现，在css的后续版本中这个功能得以实现。

不知道新的css3中有哪些奇妙的东西。。。

下面是用display:inline-block实现的工具栏！，横排的排版，没用float哦~