经典布局实现-定宽，inline-block

by lai chendong

HTML

<nav class="top-nav"></nav>
<div class="main-container">
  <nav class="left-nav"></nav><div class="main"></div>
</div>
<footer class="footer"></footer>

CSS

.top-nav{
  width:100%;
  height:80px;
  margin-bottom:20px;
}
.main-container{
  width:1260px;
  margin:0 auto;
  margin-bottom:20px;
}
.left-nav{
  width:200px;
  height:300px;
}
.main{
  width:1040px;
  height:600px;
  margin-left:20px;
}
.left-nav, .main{
  display:inline-block;
  vertical-align:top;
}
.footer{
  height:100px;
  width:1260px;
  margin:0 auto;
}
.top-nav, .left-nav, .main, .footer{
  background:#ccc;
}

JavaScript

/* 这是一种丑陋的方式，不建议使用
1. html代码间不能有空格
2. 得用vertical-align来修正垂直方向的对齐
*/