列宽等于父宽度的总和，但不适合于

我被困在应用设计到我的网站的列宽。网站的总宽度为1024px，左/右填充18px。两个宽度为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个像素在哪里？？我没有使用边框（边框发生在一个块中）。

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

来源

2015-09-13 Marcassin

你的中间栏是inline-block。如果你改变它与浮动阻止，比间隔将是正确的：

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

Updated Fiddle

更多与内联元素间距this toppic。

来源

2015-09-13 23:25:44 skobaljic

非常感谢！我在网页设计上学到了很棒的东西。每当我要对齐块时，不要使用'inline-block'是一个很好的理由:-) – Marcassin

列宽等于父宽度的总和，但不适合于

回答

相关问题