浅析inline-block的简单应用

前阵子弄了点东西，被inline-block整了个半死，总结了下，大概下面几种用法，小弟新手，各位勿喷...

1.导航菜单

html：

<nav class="nav">
    <a href="#" class="navLink">内容1</a>
    <a href="#" class="navLink">内容2</a>
    <a href="#" class="navLink">内容3</a>
    <a href="#" class="navLink">内容4</a>
    <a href="#" class="navLink">内容5</a>
</nav>

css：

.nav {
  　width: 1200px;
  　margin: 0px auto;
  　text-align: center;
　　border: 1px solid #c03;
}
.nav .navLink {
    width: 150px;
    line-height: 35px;
    color: #666;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: 1px solid #0066cc;
}

 

2.划分区域

html：

<div class="container">
　　<div class="content one">内容1</div>
　　<div class="content two">内容2</div>
　　<div class="content three">内容3</div>
　　<div class="content four">内容4</div>
</div>

css：

.container .content {
    height: 250px;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    border: 1px solid #0066cc;
}
.container .one {
    width: 300px;
}
.container .two {
    width: 500px;
}
.container .three {
    width: 150px;
}
.container .four {
    width: 150px;
}

因为在浏览器中使用inline-block属性的同一级元素中的内容如果有差异，会导致其上下错位，所以需要加上 vertical-align: top; 使其保持在同一水平线上。

由于IE7不支持inline-block属性，所以如果要应用于IE7，需要css的最下面加上这两句 *display：inline; *zoom:1;   PS：*是IE7hack，标有*的css语句只有IE7会执行，IE6不考虑... 

目前只想到这么多，其他的想到了再往上补吧..