垂直并排放置导航块

之所以不适合4个格，是因为您的显示设置为inline-block。这会在您无法控制的元素之间创建一些填充。将其替换为浮点数，即可解决所有问题：

nav {
    display: block;            <--this changed from inline-block
    float: left;               <--this line added
    vertical-align: top;
    margin-bottom: 4px;
    overflow: hidden;
    box-shadow: 0 0 2px #888;
}

现在，div彼此抵触，恰好占用了100％的宽度。如果要在两者之间留出一定的余量，则需要考虑到这一点，即：

nav {
    display: block;            
    float: left;               
    vertical-align: top;
    margin-bottom: 4px;
    overflow: hidden;
    box-shadow: 0 0 2px #888;
    margin-left: 0.5%;
    margin-right: 0.5%;
}

由于我增加了1％的保证金，因此您可以将宽度调整为24％以进行补偿。如果您不希望左右留有半边距，则必须通过:last伪类获得创造力，或者向其添加最后一列类。

至于问题的另一部分，我怀疑除非您重组代码，否则它们将始终排在最前面（我可能错了）。如果您知道总会有4个div，则可以通过对div进行重新排序来解决此问题：

<div class='container-col'>
    <div id='col1'></div>
    <div id='col5'></div>
</div>

<div class='container-col'>
    <div id='col2'></div>
    <div id='col6'></div>
</div>

<div class='container-col'>
    <div id='col3'></div>
    <div id='col7'></div>
</div>

<div class='container-col'>
    <div id='col4'></div>
    <div id='col8'></div>
</div>

CSS：

.container-col {
    float: left;
}

因此，现在我们有4个垂直列并排浮动，并且div将垂直堆叠，而它们之间没有任何间隔。这是显示结果的小提琴，也保留了边距。