html - 列宽之和等于父级宽度，但不适合

我对将设计应用于我的网站的列宽感到困惑。
网站的总宽度为1024像素，左/右为18像素。大小为132px的两个外部列围绕着其他6个109px列。每列用10px的装订线分隔。

问题：我的所有列都不适合父#centralMainBlock的内部，因此最后一列进入下一行。

这是我的HTML：

<body>
<div id="centralMainBlock">

    <div id="leftColumn" class="exteriorColumn">
        Left col
    </div>

    <div id="contentBlock">
        <div id="menuLine">
            <div class="col-md-2 bootCol">Summary</div>
            <div class="col-md-2 bootCol">Transfer</div>
            <div class="col-md-2 bootCol">Portfolio</div>
            <div class="col-md-2 bootCol">Advice</div>
            <div class="col-md-2 bootCol">Performance</div>
            <div class="col-md-2 bootCol">Activity</div>
        </div>
        <!-- website content -->
    </div>

    <div id="rightColumn" class="exteriorColumn">
        Right col
    </div>
</div>

而我的CSS：

body
{
    width: 1024px;
    height: 100%;
    margin: 0 auto;
}
#centralMainBlock
{
    width: 988px; /* 1024 - 2*18 */
    margin: 0 auto;

}

#centralMainBlock > div
{
    display: inline-block;
    vertical-align: top;
}
.exteriorColumn
{
    width: 132px;
    height: 100%;
}

#contentBlock
{
    /* 6*109 + 5*10 + 2*5
       6 central columns + 5 gutters between these + half gutter (right/left)
   */
    width: 714px;
}

当我使用引导程序时，我必须修改各列之间的装订线：

.bootCol
{
    padding-left: 5px;
    padding-right: 5px;
}

#leftColumn
{
    margin-right: 5px;
}

#rightColumn
{
    margin-left: 5px;
}

这是显示错误的JsFiddle。我添加了背景色。您可以扩展“结果”窗口，因为我将引导程序用于大屏幕（col-md- *）。

如果我删除最后一列的8px的空白，则此为第一行的结尾（如预期）。这些8像素在哪里？？我没有使用边框（边框成块出现）。

无论如何，谢谢您的帮助。

最佳答案

您的中间列是inline-block。如果将其更改为浮动浮动，则间距将是正确的：

#centralMainBlock > div {
    display: block;
    float: left;
    vertical-align: top;
}

Updated Fiddle

有关this toppic中的行内元素间距的更多信息。

关于html - 列宽之和等于父级宽度，但不适合，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32555476/