inline-block盒模型

　　CSS还提供了一种inline-block盒模型，通过为display属性设置inline-block即可实现这种盒模型，这种盒模型是inline模型和block模型的综合体：inline-block盒模型的元素既不会占据一行，同时也支持通过width、height指定宽度及高度。
　　通过使用inline-block盒模型可以非常方便地实现多个元素的并列显示。也就是说，使用inline-block盒模型也可以实现前面介绍的多栏布局。
　　在默认情况下，多个inline-block盒模型的组件将会采用底端对齐的方式，也就是它们的底部将会位于同一条水平线上，这可能不是多栏布局期望的结果。为了让多个inline-block盒模型的组件在顶端对齐，为它们增加vertical-align: top即可。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 多栏布局 </title>
    <style type="text/css">
        body{
            margin:0px;
        }
        div#container {
            width: 960px;
            margin: auto;
        }
        div>div {
            border: 1px solid #aaf;
            display: inline-block;
            vertical-align: top;
            /* 设置HTML组件的width属性包括边框 */
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            border-radius: 12px 12px 0px 0px;
            background-color: #ffc;
            padding:5px;
        }
    </style>
</head>  
<body>  
<div id="container">  
<div style="width:220px">  
<h2>疯狂软件开班信息</h2>  
<ul>  
    <li>2011年11月10日&nbsp;已满已开班</li>
    <li>2011年12月02日&nbsp;爆满已开班</li>
    <li>2012年02月08日&nbsp;已满已开班</li>
</ul>  
</div><div style="width:500px;">  
<h2>疯狂软件介绍</h2>  
&nbsp;&nbsp;&nbsp;&nbsp;疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/> 
&nbsp;&nbsp;&nbsp;&nbsp;疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、李韩飞、黄勇、陈辉等老师将带给广大学习者“非一般”的疯狂。
</div><div style="width:240px">  
<h2>公司动态</h2>  
<ul>  
    <li>《疯狂Java讲义》(第2版)上市</li>
    <li>泰豪电网软件公司来校召开现场招聘会</li>
    <li>疯狂学子赴武汉光谷软件园入职</li>
    <li>新华南方来校现场招聘</li>
</ul>  
</div>  
</div>  
</body>  
</html>

　　从上面两行粗体字代码可以看出，如果设置<div.../>元素采用inline-block盒模型显示，接下来无须使用float属性即可让它们显示在同一行，从而实现多栏布局。
　　除此之外，使用inline-block盒模型也可以非常方便地实现水平菜单。下面页面无须JavaScript脚本就实现了一个横向排列的导航菜单。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 导航菜单 </title>
    <style type="text/css">
        body>div{
            text-align: center;
            margin: auto;
        }
        div>div{
            /* 设置为inline-block盒模型，保证一行显示 */
            display: inline-block;
            border: 1px solid black;
        }
        a {
            text-decoration:none;
            /* 设置为block盒模型，允许设置高度、宽度 */
            display: block;
            width: 120px;
            padding: 10px;
            /* 设置默认背景色 */
            background-color: #eee;
        }
        a:hover {
            /* 设置鼠标悬停时的背景色 */
            background-color: #aaa;
            font-weight: bold;
        }
    </style>
</head>  
<body>  
<div>  
    <div><a href="http://www.crazyit.org">疯狂Java联盟</a></div><div>
    <a href="http://www.fkjava.org">疯狂软件教育</a></div><div>
    <a href="http://www.fkjava.org/companyInfo.html">关于我们</a></div><div>
    <a href="http://www.crazyit.org">疯狂成员</a></div>
</div>  
</body>  
</html>

注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。