列寬等於父寬度的總和，但不適合於

我被困在應用設計到我的網站的列寬。網站的總寬度爲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

列寬等於父寬度的總和，但不適合於

回答

相關問題