兼容低版本浏览器的格子布局方式

布局一

<style>
    ul, ul *{ margin: 0; padding: 0; box-sizing: border-box; }
    ul { width: 400px; float: left;  margin-right: 100px;  }
    ul:after { content: ''; display: block; width: 0; height: 0; clear: both; }
    li { list-style: none; float: left; }
    .grid1 {  border: solid #aaa; border-width: 1px 0 0 1px;  }
    .grid1 li { width: 25%; height: 100px; border: solid #aaa; border-width: 0 1px 1px 0; }
</style>
<ul class="grid1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>

布局二

<style>
    ul, ul *{ margin: 0; padding: 0; box-sizing: border-box; }
    ul { width: 400px; float: left;  margin-right: 100px;  }
    ul:after { content: ''; display: block; width: 0; height: 0; clear: both; }
    li { list-style: none; float: left; }
    .grid2 {  border-top: 1px solid #aaa; }
    .grid2 li { border: 1px solid #aaa; width: 101px; height: 100px; margin-top: -1px; margin-right: -1px;}
</style>
<ul class="grid2">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>

布局三

<style>
    ul, ul *{ margin: 0; padding: 0; box-sizing: border-box; }
    ul { width: 400px; float: left;  margin-right: 100px;  }
    ul:after { content: ''; display: block; width: 0; height: 0; clear: both; }
    li { list-style: none; float: left; }
    .grid3 { margin-top: 1px; margin-left: 1px; }
    .grid3 li { width: 25%; height: 100px;  border: 1px solid #aaa;  margin-top: -1px; margin-right: -1px;}
</style>
<ul class="grid3">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>